jquery - How to call the third div using CSS image HOVER -
<div class="grow pic"> <div class = "tooltip-wrap"> <img src="some image.jpg"> <div class="tooltip-content"> <img src="someimage.jpg"> </div> </div> </div>
hi, need don't know how call image on css of grow pic overrides size of image.
i want set someimage.jpg 100%
heres css
/*grow*/ .grow img { height: 100px; width: 100px; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; transition: 1s ease; } .grow img:hover { width: 256px; height: 256px; } .tooltip-wrap { position: relative; } .tooltip-wrap .tooltip-content { display: none; position: fixed; bottom: 50%; left: 20%; right: 10%; background-color: #fff; padding: .5em; } .tooltip-wrap:hover .tooltip-content { display: block; }
firstly, per html standard need close html tags far image tag should this: <img src="someimage.jpg" />
.
and requirement understanding use css:
.tooltip-content img:hover{ width: 100%; /* or set max-width: 100%; maximum width of original image file*/ }
to accomplish need using jquery(if need), this:
$('.tooltip-content img').hover(function(){ $(this).css('width','100%'); });
even better solution provided if define question.
Comments
Post a Comment