CSS Transition speed on off hover, strange transparency for flip pane? - html

Question

I have a couple of div elements which I want to flip over on hover. A couple things I'm unsure how to do are:
Change the flip speed on off hover (when no longer hovering). I was able to change the flip speed to 0.5s duration on hover, but how do I change the off hover speed?
The front face and back face of the flippable pane has a background color. Why is it being treated as a transparent/glass background where you can see the reverse of the front? I don't want to see the front face mirrored + back face when I should only be able to see the back face.
Any tips?
edit; in case the transparency issue doesn't appear, here's an image of what I see.
The desired display is a solid color panel with "ipsum" and "something" on it. It shouldn't show the mirror image of the front face.
.flip_container {
position: relative;
margin: 10px auto;
width: 270px;
height: 200px;
z-index: 1;
}
.flip_container {
perspective: 1000;
}
.flip_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.flip_container:hover .flip_card {
transform: rotateY(180deg);
transition-duration: 0.5s;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
font-family: tahoma, sans-serif;
text-align: center;
}
.face.front {
font-weight: bold;
font-size: 13pt;
color: white;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
}
.imagebox {
width: 260px;
height: 160px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
}
.imagebox img {
width: 250px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.flip_card.purpleline {
background-color: #BAADBA;
}
.flip_card.blueline {
background-color: #ADB3BA;
}
.smaller {
font-size: 11pt;
}
<div class="flip_container">
<div class="flip_card purpleline">
<div class="front face">
<div class="imagebox">
<img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" />
</div>
cat
</div>
<div class="back face">
ipsum
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>
<div class="flip_container">
<div class="flip_card blueline">
<div class="front face">
<div class="imagebox">
<img src="http://animalia-life.com/data_images/dog/dog7.jpg" />
</div>
dog
</div>
<div class="back face">
lorem
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>

Answer 1

CSS does not support :mousein or :mouseout.
You can use :hover to add :mousein properties and the usual default class w/o the hover should have your :mouseout properties
Else you always have JS to do the trick.
$('#element').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
//your :mousein code
}else if(e.type==='mouseleave'){
//your :mouseout code
}
});
Hope this answers your query.