how to add an image on a div without losing previous content in CSS hover effect


Tags: css,css3,design

Problem :

I want to have a transparent image on a div (div containing a background image + few lines of text inside a span). On hover I want to show a transparent image on this complete div(bg image+span) without losing the content value.

What I am facing is on hover , the new image is replacing my previous background image + span.

I want to have this transparent image on my parent ( background image & span with the text ).

Here my html content :

<body>
       <div class="complete">
            <div class='image'></div>
            <span>Vaseline Gel.</span>
        </div>
</body>

Here is my CSS :

.complete{
            width: 400px;
            height: 400px;
            margin: 40px 0px 0px 100px;
            text-align: center;
            color: #000000;
            font-size: 2.2em;
            border-radius: 6px;
            border: 1px solid #00FF00;
        }

        .image{
            background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg');
            background-size: 100% 100%;
            width: 100%;
            height: 90%;
            border-radius: 6px;
        }
        .complete:hover{
            cursor: pointer;
            font-size: 2.2em;
            opacity: 0.8;
            content: url('http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png');
         }

on removing above content: i get nice opacity with my parent bg image+span. but i want to have this transparent image above my parent div ?

JS fiddle link



Solution :

http://codepen.io/anon/pen/uozpm/

To show another background image on top of an image you can overlay it with use of absolute positioning.

    .complete {
        width:400px;
        height:400px;
        margin:40px 0 0 100px;
        text-align:center;
        color:#000;
        font-size:2.2em;
        border-radius:6px;
        border:1px solid #0F0;
        position:relative;
        }
    .complete:hover:after {
        content:'';
        position:absolute;
        left:0;
        top:0;
        height:400px;
        width:400px;
        cursor:pointer;
        font-size:2.2em;
        opacity:.8;
        background:url(http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png) center top no-repeat;
    }

    .image {
        background:url(http://www.menucool.com/slider/prod/image-slider-4.jpg);
        background-size:100% 100%;
        width:100%;
        height:90%;
        border-radius:6px;
        }

    CSS Howto..

    How to enable bootstrap 4 flex?

    How to give border a single border for two adjacent cells in css

    How to get dynamic css layout like that:

    How to show sorting order if column width is smaller than caption in free jqgrid

    How to use `attr` when not on `content` property [duplicate]

    Show popout bubble above when no space available below

    how to apply two classes of css on same element?

    CSS Dropdown menu - How to add thumbnails

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to remove spacing between tags?

    How do I include a css file while creating a wordpress theme?

    How to load one image and use it twice using HTML&CSS? No JS

    CSS float property shows no height?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    DOM How to add two divs (with jQuery inside them) next to each other?

    How do you make something in the center of the page in CSS? [duplicate]

    How to use weather API to create my weather HTML page [closed]

    How to use external css file to style a javafx application

    How to make sure the users see the new logo?

    How to vertically align text to the middle of a list

    How to override default css style rule of Bootstrap

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    How to display thick line under header of sub menu using css

    Parallax image shows at top of page on load

    CSS: how to make label appear right of the radio?

    How to add transition to CSS3 Animation steps

    How to make an image always load in the center of page?

    How to make image previews (thumbnails) using html/css

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    How to make the buttons responsive?