Text appears on image hover with images in a series [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

so I know how to make text appear on hover with CSS when there's only one image. however... I want to make a page where there's three images of the same dimensions lined up like:

x | x | x

and hovering over one image makes a text blurb about that image appear, while the other two images disappear. do I need javascript/jQuery to do this or is it possible to do in CSS alone?

also, this is a bit more complicated and not necessary for the project, but would it be possible to have the image that is being hovered shift to the left (for the second and third images) while the text appears? and/or is it possible to have a transition function so that the text looks like it's rolling out from behind a screen or something to that effect?

those last parts are totally optional and might not even be doable, really I'm just trying to figure out how to get individual divs to appear on hover while the other images disappear. thanks!

Answer 1

Yes, that's possible with CSS alone.

There are many ways to achieve this but the general idea is to have a parent element for each image (x in your question) containing the image and the caption that you want to appear over the image. You can then use CSS to make the caption overlay and/or transition in to position when hovering.

A quick example would be: (see demo code).

<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>

CSS

.image-wrapper {
    position: relative;
    width: 180px;
    float: left;
    margin-right: 10px;
}
.image-wrapper:last-child {
    margin-right: 0;
}
.image-wrapper .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(0,0,0, 0.6);
    color: #fff;
    padding: 0.5rem;
}
.image-wrapper:hover .caption {
    display: block;
}