How to display text below the image in web page when hovered over the image?

Question

So I created 4 divs containing the images horizontally. How can i get some text appeared below the images when hovered over each?

Answer 1

you can do it without js, with only css:

https://code.sololearn.com/WuR4Fls62ZG4/?ref=app

but you should share your code to get specific related solution(s)...

Answer 2

You can add the "onmouseover" event to each picture. It specifies the JavaScript function which will be called when the mouse pointer moves onto the image. In that function you can make the text appear.

Answer 3

visph thanks alot! Was really helpful!

Answer 4

in your code there is only one list and three images (with no urls) ^^

provide a more advanced code, where you hide the lists and give urls to images... (even anything images).

however, I rather would do images first (not wrapped inside a unique container), then lists, so you could target lists with css relative to their image, and just show the good one for the overed image (placed after, lists will be above images, and the lists container -- only one for all lists -- could be styled as you want ^^)

with this structure, each list should be 'display:none'; in addition their container could be either hiden or not... (if hiden, should be targeted for css rules on image hover to be displayed, in addition to the related list)

Answer 5

Lukáš Vladař thank youuu! was helpful!

Answer 6

visph I want to get these list items in the div to appear below the divs containing the images. Can you help me with that?
https://code.sololearn.com/WyIwh5hSzYDE/?ref=app

Answer 7

what you try to achieve is not clear enough ^^

is there one list to duplicate under each image div (shared), or each image div should have its own?

should the hard coded list be hidden and only displayed on hover?

these are the first minimal information you should provide...

... and I also guess that your html structure is not exactly the one needed to do it only with css ;P (we need at least to know how your data will be integrated in the page -- hard coded or dynamically inserted -- to be able to determine the better way of doing)

Answer 8

each image div should have its own and the list should appear only when the user hovers over the image

Answer 9

visph i just want to get it done that way isnt there a way TT

Answer 10

visph One page should contain four pictures of the members of the group. When the user moves the mouse over one picture, the details of that member should be displayed in an area on the page (for example, you could use a div below the pictures). The details should include the name and role that that student took for the coursework (e.g. John Smith, Student 1).

This is what the task is but i want it to look pretty so i put the images inside a div to get all those border radius, shadow and all

Answer 11

visph I did some changes somehow the image is the same cause I'm planning to add images of that size.

Answer 12

from css:

remove all from .social-text:hover and below... (line 44 and next), and instead put:

.social-text {
visibility: hidden;
color: black;
}
.social-group:hover + .social-text {
visibility:visible;
}

the :hover effect should be attached to the image (container in this case, as sibling css operator only works at same deep level (you cannot climb up in the css hierarchy ^^)

'attr()' css function is intended to retriéve ATTRibute value of the target element, not anything else: in my first code I just use it to get legend from data-legend attribute (data-* are user defined attributes). However if you need to have legend with html content and not just plain text, you rather should use this above kind of doing...

Answer 13

Okay i got it and thank you so much for elaborating. how can i get the list items displayed right below each image? visph

Answer 14

by 'right below' do you mean without spacing? play with margin (and eventually padding): there are some by default for list elements ;)

anyway, 'display:none;' could be used to hide elements... the difference with visibility is that the space needed for the element is removed (while visibility turn off/on transparency).

to set the right value of display (to show element) you could use 'unset' keyword to get the default (depends on element type), or set it explicitly if you are sure of the value to provide (ie: you have a div where you want the behavior of a span: you could set 'display:inline;')

Answer 15

visph right below as in when the images are in a row under each image the respective list items should display

Answer 16

you must modify your code structure... to wrap image (div) right with its list (and if needed, modify also css to have selectors wich target good hierarchy)...

however, you could simply wrap .social-group and social-text inside one div to not have to modify my previous css:

<div class="social-wrap">
<div class="social-group" href="#">
<img src="25f19412b6a6bcbe8eb114323ecb0b29.jpg" alt=""/>
</div>
<div class="social-text">
<ul>
<li>Student 1</li>
<li>Logo</li>
</ul>
</div>
</div>

anyway, you could remove 'position:relative;' for .social-group rules, and 'href' from its <div> attributes (not valid for div)

Answer 17

visph at first i was trying to create another row for the list items separately with the spacing somehow it didnt work. Thank you again was superr helpful with all the tips and all!