CODEWITHSUNDEEP
jquery
Phillip Senn
Phillip Senn

Reputation: 47605

Covering a div with an image

I'm writing a memory game, like concentration. Using jQuery, how do I cover over the square but not lose the contents that are inside the div?

Upvotes: 0

Views: 536

Answers (3)

Loktar
Loktar

Reputation: 35309

http://jsfiddle.net/zZzWw/

Markup

<div class="card">
     <div>Some Text brah</div>
     <img src="http://www.zombiegames.net/inc/images/Flaming-Zombooka-2.gif"/>
</div>

CSS

/* I set width and height to the same as the image */
.card{
     width: 70px;
     height: 70px;   
}

.card div{
     display:none;
}

JS

$(function(){
    $('.card').click(function(){
       $(this).children('div').toggle();
       $(this).children('img').toggle(); 
    });
});

Can just toggle between the 2 elements that are wrapped with a container element.

Upvotes: 4

Steve
Steve

Reputation: 1402

Use CSS to fill the div with the original image being the background.

Then change the CSS to have the new background image.

Upvotes: 1

ed209
ed209

Reputation: 238

Try regular CSS. Put an image in the div with visibility:hidden. Use javascript to toggle to visibility:visible. Maybe set z-index as well.

Upvotes: 1

Related Questions