How to make an image hover over another?


Tags: html,css,image,hover

Problem :

I was wondering how I would make an image appear directly over another image when I hover over that image?

Here is the page I'm working on: http://sehunyifan.tumblr.com/biastest I didn't make the original code myself I'm just trying to tweak it and implement stuff.

On those images I want a transparent image with text to show when I hover over them, but I can't figure out how to do it.

CSS:

.f1 {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
}

.hoverimg {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px; 
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out
}

.f1:hover .hoverimg 
{
    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;

HTML:

<div class="f1">
    <img src="IMGURL">
    <div class="hoverimg">
        <img src="HOVERIMGURL">
    </div>
</div>

.f1 works just fine but .hoverimg does not and I'm not sure what to do. What I thought to do with replicating the entire .f1 section because I want it to look exactly the same but only appear when I hover seems not to have worked.

I'm not an expert with code I'm just trying to play around and I'm not sure what the next step is.

Fiddle: https://jsfiddle.net/dodkmrof/



Solution :

Try this:

.f1 {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
}
.f1 img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hoverimg {
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.f1:hover .hoverimg {
    opacity: 1;
}
<div class="f1">
    <img src="http://placehold.it/280x380/000000/ffffff" />
    <img src="http://placehold.it/280x380/ffffff/000000" class="hoverimg" />
</div>


    CSS Howto..

    How to position two
    elements side by side?

    How do I use CSS to to vertically center align an image in a div?

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How to add a mobile optimised external CSS to a Shopify site

    Use anchors and :target for navigation. How to show first layer by default

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to access this children div

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How does CSS float work when applied to an “ul” element

    How to make one div's height depended of another div's height?

    Implementing a select element in my form, but unsure how to grab user selection for a list

    PHP Show Hidden Div

    How to load self hosted font files if the GoogleFont service is unavailable?

    css: How to select first anchor tag inside table

    How to center align

    How to make a 3D banner overlay (??) with CSS

    How to merge all with class

    how to combine multiple css class selectors into one?

    How do I change the opacity of an image when I hover of my text?

    How do I add css elements to ng-repeat templates?

    page breaks and css - how to skip last page?

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    How to fade the background-image to black with CSS?

    How to write below CSS lines in zend framework 2 syntax?

    How to contain imported css within a div

    How can I keep the elements inside a div independent from it's CSS3 animations?

    How to remove Clear:Both in CSS

    Show pseudo element between elements

    how do I float a div over a background image in a different div

    How to fix layout to browser window without scroll