Code: On Hover Panel for Images

This codes shows a panel when the visitor hovers an image. This panel can contain like button, add to favorites, edit and etc. When the mouse goes out, the panel gets hidden. Hope yo be useful for you.
<!-- this script got from www.cssfreecode.com -->
<html><head>
<style>@import url(http://cssfreecode.com/view/files/1128_font.css);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0029 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
}
figure.snip0029 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0029 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0029 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}
figure.snip0029 figcaption h2 {
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  margin: 0;
  padding: 20px 15px;
  position: absolute;
  font-size: 1em;
  bottom: 35%;
  right: 30px;
  left: 30px;
  word-spacing: -0.1em;
  font-weight: 300;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
  background-color: #000000;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}
figure.snip0029 figcaption h2 span {
  font-weight: 800;
}
figure.snip0029 figcaption > div {
  border-radius: 0 0 5px 5px;
  background-color: #fff;
  position: absolute;
  left: 45px;
  right: 45px;
  bottom: 40px;
  text-align: center;
  padding: 5px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
  -webkit-transform: translate(0, -40px);
  transform: translate(0, -40px);
}
figure.snip0029 figcaption > div i {
  font-size: 23px;
  padding: 6px;
  color: #000000;
  opacity: 0;
  position: relative;
  top: -50px;
  -webkit-transition: top 0.35s, opacity 0.35s;
  transition: top 0.35s, opacity 0.35s;
}
figure.snip0029 figcaption a {
  opacity: 0.8;
}
figure.snip0029 figcaption a:hover {
  opacity: 1;
}
figure.snip0029 figcaption::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  background-image: linear-gradient(to top, #000000 0%, transparent 50%, #000000 100%);
}
figure.snip0029:hover img,
figure.snip0029.hover img {
  opacity: 0.7;
}
figure.snip0029:hover figcaption h2,
figure.snip0029.hover figcaption h2 {
  -webkit-transform: translate(0, -25%);
  transform: translate(0, -25%);
}
figure.snip0029:hover figcaption > div,
figure.snip0029.hover figcaption > div {
  -webkit-transform: translate(0, -15px);
  transform: translate(0, -15px);
}
figure.snip0029:hover figcaption::before,
figure.snip0029.hover figcaption::before {
  opacity: 0.8;
}
figure.snip0029:hover figcaption i,
figure.snip0029.hover figcaption i {
  top: 0px;
  opacity: 0.7;
}
figure.snip0029:hover a:first-child i,
figure.snip0029.hover a:first-child i {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip0029:hover a:nth-child(2) i,
figure.snip0029.hover a:nth-child(2) i {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
figure.snip0029:hover a:nth-child(3) i,
figure.snip0029.hover a:nth-child(3) i {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


/* Demo purposes only */
html {
  height: 100%;
}
body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
}</style></head><body>
<figure class="snip0029">
	<img src="http://cssfreecode.com/view/files/1128_a.jpg" alt="sample10"/>
	<figcaption>
		<div>
			<a href="#"><i class="ion-image"></i></a>
			<a href="#"><i class="ion-person-add"></i></a>
			<a href="#"><i class="ion-map"></i></a>
		</div>
		<h2>Nothing I do is <span>my</span> fault</h2>	
	</figcaption>			
</figure>

<figure class="snip0029">
	<img src="http://cssfreecode.com/view/files/1128_b.jpg" alt="sample12"/>
	<figcaption>
		<div>
			<a href="#"><i class="ion-image"></i></a>
			<a href="#"><i class="ion-person-add"></i></a>
			<a href="#"><i class="ion-map"></i></a>
		</div>
		<h2>I like <span>things</span> better </h2>	
	</figcaption>			
</figure>
<script src='http://cssfreecode.com/view/files/jquery.min.js'></script>
        <script>
          /* Demo purposes only */
$("figure").mouseleave(
function () {
  $(this).removeClass("hover");
});
          
        </script>
</body></html>
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>
If you don't know how to use this code or need more information Click here!

	You can leave comments once you sign in/up.
CSS Best Codes

Code: On Hover Panel for Images

You can leave comments once you sign in/up.

Links
