使用CSS创建悬停效果

Question

I am learning to create hover effect with images and text.

What I have is this:

<ul class="photo-grid">
    <li>
        <a href="">
            <figure>
                <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe">
                <figcaption><p>Image One</p></figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="">
            <figure>
                <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower">
                <figcaption><p>Image Two</p></figcaption>
            </figure>
        </a>
    </li>
    <li><a href="">
            <figure>
                <img src="img/imgthree" height="180" width="320" alt="Notre Dame">
                <figcaption><p>Image Three</p></figcaption>
            </figure>
        </a>
    </li>
</ul>

and css for this is

.photo-grid {
    margin: 1em auto;
    max-width: 1106px;
    text-align: center;
}

.photo-grid li {
    border: 5px solid white;
    display: inline-block;
    margin: 1em;
    width: 289px;
}

.photo-grid img {
    display: block;
    height: auto;
    max-width: 100%;
}

.photo-grid figure {
    height: 163px;
    overflow: hidden;
    position: relative;
    width: 289px;
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    vertical-align: middle;
}

.photo-grid li:hover figcaption {
    opacity: 1;
}

.photo-grid img {
    display: block;
    height: auto;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    max-width: 100%;
}

.photo-grid li:hover img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transform: scale(1.4);
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    vertical-align: middle;
}

.photo-grid li:hover figcaption p {
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
    z-index: 100;
}

It is working fine, I have the image in a square/rectangle shape and when I move the cursor over it the image fades and I get a text. But here I need few changes,

1) A text needs to be displayed along with the image (preferably over the image)
2) When the cursor is moved over the image another set of text should get displayed (which is also getting displayed with the current code) but the square image should get converted to a circle.

Answer 1

Try this

in html part

 .photo-grid { margin: 1em auto; max-width: 1106px; text-align: left; margin-left: 5%; } .photo-grid li { border: 5px solid white; display: inline-block; margin: 1em; width: 289px; } .photo-grid img { display: block; height: 300px; width: 300px; max-width: 100%; position: absolute; } .photo-grid figure { height: 300px; overflow: hidden; position: relative; width: 300px; } .photo-grid figcaption { background: rgba(0, 0, 0, 0.8); color: white; display: table; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 100; } .photo-grid figcaption p { display: table-cell; font-size: 1.5em; position: relative; top: -40px; width: 289px; vertical-align: middle; } .photo-grid li:hover figcaption { opacity: 1; } .photo-grid:hover figure { border-radius: 50% } .photo-grid figcaption p { display: table-cell; font-size: 1.5em; position: relative; top: -40px; width: 289px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; vertical-align: middle; height: 300px; width: 300px; text-align: center; } .photo-grid li:hover figcaption p { -moz-transform: translateY(40px); -webkit-transform: translateY(40px); transform: translateY(40px); } .photo-grid figcaption { background: rgba(0, 0, 0, 0.8); color: white; display: table; height: 300px; width: 300px; left: 0; opacity: 0; position: absolute; right: 0; top: 0; -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; z-index: 100; } #text { z-index: 100; position: absolute; color: #000; font-size: 24px; font-weight: bold; left: 1px; top: 145px; text-align: center; } #text:hover { opacity: 0; } 

 <ul class="photo-grid"> <li> <a href=""> <figure> <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe"> <figcaption> <p>Image One</p> </figcaption> <p id="text">Text One</p> </figure> </a> </li> <li> <a href=""> <figure> <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower"> <figcaption> <p>Image Two</p> </figcaption> <p id="text">Text Two</p> </figure> </a> </li> <li> <a href=""> <figure> <img src="img/imgthree" height="180" width="320" alt="Notre Dame"> <figcaption> <p>Image Three</p> </figcaption> <p id="text">Text Three</p> </figure> </a> </li> </ul>