effectHover

In this example below you will see how to do a effectHover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ferencok, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ferencok ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>effectHover</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="images">
 <figure>
   <div class="hoverProduct">
 <a href="#" ><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></a>
   </div>
   <figcaption>
   <a href="#"><h3>Spray Packs</h3></a></figcaption>
   </figure> </div>

<div class="hover12 column">
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
		</div>
		<div>



  <div class="images">
 <figure> 
 <a href="#"><img src="css/images/SprayPacks.jpg" alt="Lorem pixel" /></a>
              <figcaption><a href="#"><h3></h3></a></figcaption>
           </figure>
  </div>
  
  <p>I am text.</p>

<h2 id="demo12">12. Opacity #2</h2>
	<div class="hover12 column">
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
		</div>
		<div>
			<figure style="background-color:orange;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure>
		</div>
		<div>
			<figure style="background-color:#3498db;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
			<span>Hover</span>
		</div>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/effecthover-PNroxY */
images{
  float:left; 
}/*
.column div {
	position: relative;
	float: left;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
/* Opacity #2 *//*
.hover12 figure {
	background: red;
}
.hover12 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover12 figure:hover img {
	opacity: .8;
}*/
.hoverProduct{
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
  display:block;
  border: 1px solid black;
}
.hoverProduct a {
	position: relative ;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
  height: auto;
  
}
/* Opacity #2 */
.images .hoverProduct img {
	opacity: 1;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
  
 }
.images .hoverProduct a img:hover {
	opacity: 0.5;
  background:rgba(0,0,0, 0.5);
}








figcaption{
  margin: ;
  width: 10%;
}
h3{
  padding: 7%;
}


Comments