2

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>
Laura Q
  • 23
  • 1
  • 1
  • 3
  • It looks like you're trying to solve a javascript problem with CSS, which has limited capacity to add elements. This should get you started in the right direction: https://stackoverflow.com/questions/14149360/text-on-image-mouseover – Chiperific Aug 31 '17 at 03:24

5 Answers5

5

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.

Sazzad Hossain
  • 116
  • 3
2

you can do this with jquery like below example:

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

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

 );
});
Therichpost
  • 1,759
  • 2
  • 14
  • 19
1

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 :).

J barit
  • 11
  • 3
1

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.

Chiperific
  • 4,428
  • 3
  • 21
  • 41
0

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;
}
mvdelrosario
  • 103
  • 7