How to add text when hovering - html

Question

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>

Answer 1

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.

Answer 2

you can do this with jquery like below example:
$("#team img").each(function(){
$(this).hover(
function() {
$(this).text("worked");
},
function() {
$(this).text("");
}
);
});

Answer 3

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.

Answer 4

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

Answer 5

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;
}