Survol 4

Une façon d'ouvrir une image au survol.

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; background: url('http://ekladata.com/6LB3odY2528DGytWKiz_zVpMQus@900x506.jpg'); background-size: cover;">
<p id="vol0">&nbsp;</p>
<p id="volg" class="vol">&nbsp;</p>
<p id="vold" class="vol">&nbsp;</p>
</div>
<p>...</p>
<style><!--
#vol0{position:absolute;z-index:2; width:900px; height:506px;}
.vol{position:absolute;z-index:1; width:450px; height:506px; background:url('http://ekladata.com/FU5KIXzd1gz_0xyAW-oGcMC18Rg@900x506.jpg'); background-size:900px 506px; transition:all 1s linear;}
#volg{transform:translate(0px,0px) perspective(400px) rotatey(0deg); background-position:0px 0px; transform-origin:center left;}
#vold{transform:translate(450px,0px) perspective(400px) rotatey(0deg); background-position:-450px 0px;transform-origin:center right;}
#vol0:hover ~ #volg{transform:translate(0px,0px) perspective(400px) rotatey(90deg);}
#vol0:hover ~ #vold{transform:translate(450px,0px) perspective(400px) rotatey(-90deg);}
--></style>

*****************

La première image de fond est placée en fond du cadre.

On place le bouton invisible (vol0) au dessus des parties de la seconde image pour l'ordre élément survolé puis élément animé.

La seconde image est placée en fond de  deux paragraphes (volg et vold) qui en contiennent chacun la moitié, selon leur position (background-position).

Selon l'animation de chaque partie, le mouvement est inversé, l'une tournant à gauche et l'autre à droite (transform-origin).

Le survol du bouton invisible les fait s'animer en rotation.

Variante dans l'animation des 2 volets: Survol

<div style="position: relative; overflow: hidden; width: 900px; height: 506px; margin: 5px auto; text-align: left; background: url('http://ekladata.com/6LB3odY2528DGytWKiz_zVpMQus@900x506.jpg'); background-size: cover; border: 6px ridge white;">
<p id="vol0a">&nbsp;</p>
<p id="volga" class="vola">&nbsp;</p>
<p id="volda" class="vola">&nbsp;</p>
</div>

<style><!--
#vol0a{position:absolute;z-index:2; width:900px; height:506px;}
.vola{position:absolute;z-index:1; width:450px; height:506px; background:url('http://ekladata.com/FU5KIXzd1gz_0xyAW-oGcMC18Rg@900x506.jpg'); background-size:900px 506px; transition:all 1s linear;}
#volga{transform:translate(0px,0px); background-position:0px 0px; transform-origin:center left;}
#volda{transform:translate(450px,0px); background-position:-450px 0px;transform-origin:center right;}
#vol0a:hover ~ #volga{transform:translate(-450px,0px);}
#vol0a:hover ~ #volda{transform:translate(900px,0px);}

--></style>