CODEWITHSUNDEEP
javascripthtmlcsswordpressonmouseover
Brian HK
Brian HK

Reputation: 920

Adding overlay on mouseover

I am a very new web developer. I am currently coding a simple wordpress landing page and I wanted to add some functionality to darken and add text when the user hovers the mouse over said image. It truly should be something quite simple.

For an example that actually implements the same wordpress theme and does it right.

in the "about us" section of the page above, they have pictures that have the exact same functionality I need for hovering, yet I have no idea how they did this.

If you need any more clarification, please do not hesitate to ask, I am not sure if my lexicon is correct/clear at all.

Upvotes: 0

Views: 900

Answers (2)

user3377663
user3377663

Reputation:

DEMO

Just show the white background element with opacity and the content element when wrapper is mouse over. Note that you need to you need to separate the content from the background element so the background's opacity won't effect the content.

<div class="wrap">
    <div class="content">This is the content</div>
    <div class="bkg"></div>
</div>

.wrap {
    background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
    width:475px;
    height:365px;
    position:relative;
}
.wrap:hover .bkg {
    display:block;
}

.wrap:hover .content {
    display:block;
}

.bkg {
    background:#fff;
    opacity:0.5;
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
    filter: alpha(opacity=50);
}

.content {
    width:100%;
    height:100%;
    display:none;
    z-index:3;
    position:absolute;
}

Upvotes: 3

Just a guy
Just a guy

Reputation: 5912

This is a css transition on hover.

See a live demo here

Here is the setup html:

<div class="container">
    <div class="bottom-layer"></div>
    <div class="overlay">
        <h2>Hi there!</h2>
    </div>
</div>

The container has a positioned overlay that fades in over the bottom layer content.

Here's the driving css:

.container,
.bottom-layer,
.overlay {
    height: 100px;
    width: 200px;
}

.container {
    position: relative;
}

.bottom-layer {
    background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(255,255,255, .1);
    transition: opacity 0.6s;
}

.container:hover .overlay {
    opacity: 1;
}

The two important parts are the positioning and the transition. The overlay has to be absolutely positioned to render over the element on the same level (its "sibling"). We set the opacity to 0, but set it to 1 when the parent is overlayer.

Then, we just tell it to run a transition whenever the opacity changes..

Upvotes: 1

Related Questions