CODEWITHSUNDEEP
htmlcssimage
Laura Q
Laura Q

Reputation: 23

How to add text when hovering

https://codepen.io/dhanushbadge/pen/uJkcq

Hi, my question is about adding adding icons and text when hovering at the img. When hovering it shows gray but I want it to also show with 3 icons and a text on top. I can't seem to add text inside the circle when hovering. The original code is in the link Please helppppppppp

html {
  font-size:62.5%;
}
body {
  margin:0;
  font-size:1.4rem;
  font-family:arial;
  background-color:#ddd;
}
img {
  border:0;
  width:100%;
  height:100%;
}
#team {
  max-width:96rem;
  width:100%;
  min-height:200px;
  height:auto;
  margin:0 auto;
  background-color:white;
  box-sizing:border-box;
  padding:0;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-align-content:flex-end;
  align-content:flex-end;
}
figure {
  width:12.5rem;
  height:12.5rem;
  display:block;
  margin:0.5rem 1rem 4rem 0.5rem;
  padding:0;
  box-sizing:content-box;
  color:black;
}
figure img {
  -webkit-border-radius:50%;
  -moz-border-radius:50%;  
  border-radius:50%; 
}
#team figure img {
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
  transition:opacity 0.26s ease-out;
 
   
}
#team:hover img, #team:active img {
  opacity:1;
}
#team:hover img:hover, #team:active img:active   {
  opacity:0.3;
 
}
figcaption {
  font-size:1.2rem;
  text-align:center;
} 
<div id="team">
  <figure><img src="http://500px.com/graphics/pages/team/squares/oleg.jpg"><figcaption>Oleg Gutsol</figcaption></figure>
  <figure><img             src="http://500px.com/graphics/pages/team/squares/evgeny.jpg"><figcaption>Evgeny Tchebotarev</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/dustin.jpg"><figcaption>Dustin Plett</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/adam.jpg"><figcaption>Adam Shutsa</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"><figcaption>Roxy Keshavarznia</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/eric.jpg"><figcaption>Eric Akaoka</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/david.jpg"><figcaption>David Charlec</figcaption></figure>
  
</div>

Upvotes: 2

Views: 24274

Answers (5)

Chiperific
Chiperific

Reputation: 4696

There are two ways to accomplish this:

1. Pure HTML and CSS (no Javascript or JQuery)

See This Fiddle

First, add your text and icons into the HTML. It looks like you can add them inside the <figure> block.

Second, add a CSS rule that only shows these elements when the figure is :hover-ed Learn more about the :hover pseudo-class here

Third, tweak the position, or margins of the elements to get them to display where you want.

2. HTML and CSS and JQuery

See This Other Fiddle

Still add your HTML elements with a unique class (I used "hoverable").

Still set your CSS to hide these elements by default. Either visibility:hidden; or display:none;

Then add some JQuery which watches for the .mouseover() and .mouseout() events to toggle the visibility or display of the elements.

Upvotes: 1

Sazzad Hossain
Sazzad Hossain

Reputation: 116

Are you trying to do something like this (see hover with caption) https://codepen.io/kw7oe/pen/mPeepv

To achieve this you need to structure your html as so

<figure>
  <img src="" alt="">
  <span class="caption">{content}</span>
</figure>

The span class in this case has opacity 0 by default and changes to opacity 1 on hover. Using some css transition, we get a smooth appear and disappear effect. Figure in this case would have a relative positioning so that the span could be absolute hover over the entire thing.

figure { position: relative; display: block; overflow: hidden; }
figure img { max-width: 100% }
figure .caption { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: all .2s ease-in-out }
figure:hover .caption { opacity: 1; }

You can easily search for image hover caption on codepen and find a quite a few nice examples.

Upvotes: 5

mvdelrosario
mvdelrosario

Reputation: 103

As @John Joseph mentioned, this can be achieved easily using CSS. Here's a PURE CSS approach.

HTML

<div class="image-container">
<div class="image-cover" style="display:none;">
      <img src="your_icon"/>
      <span> your_text </span>
    </div>
</div>

CSS

.image-container{
    background-image: url(your_image);
    position: relative;
}

.image-container:hover .image-cover{
    display:block;
}

.image-cover{
  position:absolute;
}

Upvotes: 0

Therichpost
Therichpost

Reputation: 1815

you can do this with jquery like below example:

$("#team img").each(function(){

  $(this).hover(
    function() {
      $(this).text("worked");
    },
    function() {
      $(this).text("");
    }

 );
});

Upvotes: 2

J barit
J barit

Reputation: 11

you can use javascript or some css trick for that. css trick - you can provide some divs containing your desire design. and put it as hidden then show it when the img hovered. javacript - same as css but the code written in js haha :).

Upvotes: 1

Related Questions