HTML或/和CSS中的图像标题悬停动画

Question

I'm trying to make an image caption hover animation https://jsfiddle.net/6Lwo2231/ this is what I got.

HTML:

<div class="container-a1">
    <ul class="caption-style-1">
        <li>
            <img src="http://i68.tinypic.com/b8js6p.jpg" alt="" />
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Friends</h1>
                    <p>Whatever It Is - Always Awesome</p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS:

.caption-style-1{
list-style-type: none;
margin: 0px;
padding: 0px;

}

.caption-style-1 li{
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.caption-style-1 li:hover .caption{
    opacity: 1;

}


.caption-style-1 img{
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 4;
}


.caption-style-1 .caption{
    cursor: pointer;
    position: absolute;
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;

}
.caption-style-1 .blur{
    background-color: rgba(0,0,0,0.65);
    height: 300px;
    width: 400px;
    z-index: 5;
    position: absolute;
}

.caption-style-1 .caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.caption-style-1 .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 320px;
    height: 240px;
    text-align: center;
    top:20px;
}

I am trying to make the caption visible even when not hovered by a mouse cursor, and when hover the image by a mouse cursor will move down the caption in the center and will show an arrow image to continue to a link page, just like this image shows.

Looking forward to your help. Thanks!

Answer 1

Here's my attempt. https://jsfiddle.net/6Lwo2231/3/

Just replace the arrow span with whatever arrow image you want.

What i added.

HTML

<div class="caption-text">
        <h1>Friends</h1>
        <p>Whatever It Is - Always Awesome</p>
        <span class="arrow-link">ARROW IMG HERE</span>
</div>

CSS

.caption-style-1 li:hover .blur{
    opacity: 1;
}

.caption-style-1 li:hover .caption-text{
    top:20px;
}

.caption-style-1 li:hover .arrow-link{
    opacity: 1;
}

.caption-style-1 .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 320px;
    height: 240px;
    text-align: center;
    top:0px;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
}

.caption-style-1 .blur{
    opacity: 0;
    background-color: rgba(0,0,0,0.65);
    height: 300px;
    width: 400px;
    z-index: 5;
    position: absolute;

    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
}

EDIT: @tinkerbelts. https://jsfiddle.net/6Lwo2231/5/

Your problem was this snippet

.caption-style-1 img{
        margin: 0px;
        padding: 0px;
        float: left;
        z-index: 4;
    }

You're applying a left float to all images inside your caption, including the arrow.

Answer 2

Like this? https://jsfiddle.net/6Lwo2231/2/

Basically you want to alter the position of .caption-text , so you'll have to give this css selector a different position when the list item is hovered .caption-style-1 li:hover .caption-text .