CODEWITHSUNDEEP
css
RGS
RGS

Reputation: 4253

css show full image on click div?

If I have an image bigger than 200px height I will crop this image with a div:

.voltaimgdiv{
 max-height:200px;
 display:block;  
 line-height:200px;
 overflow:hidden;
 margin-bottom:10px;
}

html

<div class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>

my problem is, I want this div to grow and show full image if user clicks on it. Any ideas?

https://jsfiddle.net/64f36m4y/

Upvotes: 0

Views: 131

Answers (4)

Feelsbadman
Feelsbadman

Reputation: 1165

Try this:

$('.voltaimgdiv').click(function() {
    $('.voltaimgdiv').css('height', 'auto');
});
.voltaimgdiv {
    height: 200px;
    display: block;
    line-height: 200px;
    margin-bottom: 10px;
    border: 1px solid #000;
    overflow-y: hidden;
}
<div class="voltaimgdiv">
    <img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>

show all image on click?

Upvotes: 0

Uzair
Uzair

Reputation: 775

if you want to do with CSS.Just Assign ID And Use it in CSS.

HTML:

<div id="clkme" class="voltaimgdiv"> <img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif"> </div>

CSS:

#clkme:active{
  max-height:500px;
  }

You can Write Javascript As Well And Javascript is a better choice. by using

Onclick="Name"

Function In div. and make a body of javascript

function Name{
\\your code ..
}

Upvotes: 1

Mohammed Alasa&#39;ad
Mohammed Alasa&#39;ad

Reputation: 539

you can maximize image height on click using this css code

.voltaimgdiv:active{
  max-height:500px;
}

Upvotes: 2

Fiido93
Fiido93

Reputation: 1978

I recommend by using toggleClass.

Better set the height and width of the div and image auto. After using on click function.

JS

jQuery(function($){
             $('.voltaimgdiv').click(function(){
             $('.voltaimgdiv').toggleClass('full')
             })
        })

CSS

.full img{
  width:100%;
}

.full{
  max-height:100% !important;
  line-height: 0;
}

DEMO

Upvotes: 2

Related Questions