CODEWITHSUNDEEP
css
Ajay
Ajay

Reputation: 4251

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

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

Upvotes: 1

Views: 245

Answers (1)

JohanVdR
JohanVdR

Reputation: 2878

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;
        }

Upvotes: 2

Related Questions