CSS image hover effects shine effects

Learn how to create image hover effects using only custom CSS. Very short code under good CSS hover shines effects animation.

Every web designer can use these effects on your website design carrier and you can change easily this code and modify as you wish.

If want learns more about css hover effects then please check this link. My previous demo you can check, please how to create 3D Image Hover Effect using only pure CSS.

HTML

<figure class="box">
	<img src="https://source.unsplash.com/user/erondu/800x600" alt="csspoints" />
	<figcaption>
		<h3>Web Developer</h3>
		<p>A Web developer is a kind of programmer who specializes in the development of website.</p>
	</figcaption>
	<a href="#"></a>
</figure>
<figure class="box">
	<img src="https://source.unsplash.com/user/von_co/800x600" alt="csspoints" />
	<figcaption>
		<h3>Seo Expert</h3>
		<p>Then you should learn everything there is to know about SEO and become an SEO Expert.</p>
	</figcaption>
	<a href="#"></a>
</figure>
<figure class="box">
	<img src="https://source.unsplash.com/user/daladude/800x600" alt="csspoints" />
	<figcaption>
		<h3>Web Designer</h3>
		<p>A Web designer is someone who prepares content for the Web.</p>
	</figcaption>
	<a href="#"></a>
</figure>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);

.box {
	background-color: #fff;
	color: #ffffff;
	display: inline-block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	margin: 10px 5px;
	max-width: 315px;
	min-width: 230px;
	overflow: hidden;
	position: relative;
	text-align: right;
	width: 100%;
}
.box *,	.box *:before,	.box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.45s ease;
	transition: all 0.45s ease;
}
.box img {
	backface-visibility: hidden;
	max-width: 100%;
	vertical-align: top;
}
.box:before,	.box:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background-color: #b81212;
	opacity: 0.5;
	-webkit-transition: all 0.45s ease;
	transition: all 0.45s ease;
}
.box:before {
	-webkit-transform: skew(30deg) translateX(80%);
	transform: skew(30deg) translateX(80%);
}
.box:after {
	-webkit-transform: skew(-30deg) translateX(70%);
	transform: skew(-30deg) translateX(70%);
}
.box figcaption {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	bottom: 0;
	padding: 20px 20px 20px 40%;
}
.box figcaption:before,	.box figcaption:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #b81212;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
	content: '';
	opacity: 0.5;
	z-index: -1;
}
.box figcaption:before {
	-webkit-transform: skew(30deg) translateX(100%);
	transform: skew(30deg) translateX(100%);
}
.box figcaption:after {
	-webkit-transform: skew(-30deg) translateX(90%);
	transform: skew(-30deg) translateX(90%);
}
.box h3,	.box p {
	margin: 0;
	opacity: 0;
	letter-spacing: 1px;
}
.box h3 {
	font-family: 'Teko', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
}
.box p {
	font-size: 0.9em;
}
.box a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.box:hover h3, .box:hover p {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 0.9;
}
.box:hover:before {
	-webkit-transform: skew(30deg) translateX(30%);
	transform: skew(30deg) translateX(30%);
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
.box:hover:after {
	-webkit-transform: skew(-30deg) translateX(20%);
	transform: skew(-30deg) translateX(20%);
}
.box:hover figcaption:before {
	-webkit-transform: skew(30deg) translateX(50%);
	transform: skew(30deg) translateX(50%);
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
.box:hover figcaption:after {
	-webkit-transform: skew(-30deg) translateX(40%);
	transform: skew(-30deg) translateX(40%);
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

4 Comments

  1. it show nice

  2. […] If you want more custom css loader then follow loading.io website. and learn how to create CSS image hover effects shine effects. […]

  3. Vielen Dank! Dieser Artikel hat wirklich geholfen. Haben Sie weitere Ratschläge, die ich gebrauchen könnte?

Leave a Reply