How to pull an image inside a ul li div when the css surrounding it won't let you
I have an image inside a ul li container.
Here's a simple code:
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<!-- Start Image List -->
<ul>
<li data-images="rm_container_1" data-rotation="-15">
<img class="parentImage" src="artwork/book-covers/cover1small.png" />
</li>
<li data-images="rm_container_2" data-rotation="-5">
<img id="cover2" src="artwork/book-covers/cover2small.png"/>
</li>
<li data-images="rm_container_3" data-rotation="5">
<img id="cover3" src="artwork/book-covers/cover3small.png"/>
</li>
<li data-images="rm_container_4" data-rotation="15">
<img id="cover4" src="artwork/book-covers/cover4small.png"/>
</li>
<li data-images="rm_container_5" data-rotation="0">
<img id="cover5" src="artwork/book-covers/cover5small.png"/>
</li>
</ul>
</div>
</div>
Now that I role over this image, which is an insider LI, I want this image to move forward in time, zoomed in, and when you hover over the image, the image will return to normal.
Note. cover1small.png is 164 x 240 and the larger / sharper image is 400 x nnn, which means the size will be proportional.
Here's the balance of the code: for UL
<div style="display:none;">
<div id="rm_container_1">
<img src="artwork/book-covers/cover1.png"/>
<!-- <img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/> -->
</div>
<div id="rm_container_2">
<img src="artwork/book-covers/cover2.png"/>
<!-- <img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/> -->
</div>
<div id="rm_container_3">
<img src="artwork/book-covers/cover3.png"/>
<!-- <img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/> -->
</div>
<div id="rm_container_4">
<img src="artwork/book-covers/cover4.png"/>
<!-- <img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/> -->
</div>
<div id="rm_container_5">
<img src="artwork/book-covers/cover5.png"/>
<!-- <img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/> -->
</div>
</div>
This is a modification of the CODROPS article: here -> http://tympanus.net/codrops/2011/04/28/rotating-image-slider/
What I'm eliminating is the "arrows" on the right and left, a play / pause button, so all you have is the main body showing the first "covers" of the images that are tilted.
I'm making a website to launch a graphic novel and all I want to do is do it like this, when I flip or click, the image will pop forward and go beyond the UL LI constraints. I get a larger image, limited to a 165 x 240 cover.
Thanks everyone, the launch is June 1st, so the timing makes sense. If you need more code, everything I do is in the CODROPS link.
UPDATE: This is what I am trying to achieve: http://www.journaldev.com/wp-content/uploads/css/css3-zoom-animation/css3-hover-zoom1.html
Bottom line: The cover is not hir-res, but the photo I want to go to is.
This is the effect I want to achieve on mouseover:
.rm_container ul li .parentimage {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rm_container ul li .parentimage:hover {
-moz-transform: scale(4);
-webkit-transform: scale(4);
-o-transform: scale(4);
-ms-transform: scale(4);
transform: scale(4);
}
It should look cool, but simple.
Ah, here's my plunker mocking what I'm trying to do.
source to share
In case of randomness this is what you are looking for, it can be done with jquery:
https://jsfiddle.net/z896hdhL/2/
The above script contains startup code to see what this example will do. The code below is an example of what your implementation would look like.
Html example:
<ul>
<li><img src="small.jpg" class="small"></img></li>
</ul>
CSS
li {
list-style-type: none;
}
.small, .large {
transition: all .3s ease-out;
}
.large:hover {
transform: scale(4);
}
Jquery:
$(".small").on("mouseenter", function(){
var $large = $("<img src=\"large.jpg\" class=\"large\"></img>");
$(this).replaceWith($large);
});
source to share