Hover-Effekte für Bilder

Hier stelle ich viele Hover Effekte für Bilder vor

Beitrag am erstellt von

Wenn ich im Web surfe und mir die ganzen Hover-Effekte für Bilder und co. angucke stelle ich fest, dass die meisten nur aus cursors: normal; zu cursor:pointer; bestehen. Ich als Designer möchte das natürlich ändern und stelle hiermit einige schöne Hover Effekte kostenlos zu Verfügung. Als mit CSS3 das transition-modul und transform-modul ins Leben gerufen wurden, hat sich die Zahl der möglichen Hover-Effekte drastisch gesteigert, da diese Module die Elemente, sehr viele neue Eigenschaften geben, die für Hover-Effekte sehr passend sind.



<a class="grey" href="beispiel-bild.jpg" data-lightbox="beispielbild">
    <img src="beispiel-bild.jpg" alt="beispielbild">
</a>

Hover Effekt für Bilder Hover Effekt für Bilder

Grey


.wow {
	position: relative;
	line-height: 0;
	outline: 0;
	overflow: hidden;
	border: solid 3px transparent;
	-webkit-transition: 300ms ease-in-out;
	-moz-transition: 300ms ease-in-out;
	-o-transition: 300ms ease-in-out;
	transition: 300ms ease-in-out; 
}

.wow:hover {
	border: 3px solid #2688E3;
}

.wow:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out; 
}

.wow:hover:before {
	background: rgba(0, 0, 0, 0.4);
}

.wow img {
	min-width: 100%;
	min-height: 100%;
	border: 0;
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out;
}

.wow:hover img {
	-webkit-transform: scale(1.2, 1.2);
	   -moz-transform: scale(1.2, 1.2);
	    -ms-transform: scale(1.2, 1.2);
	     -o-transform: scale(1.2, 1.2);
	        transform: scale(1.2, 1.2);
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Hover Effekt für Bilder Hover Effekt für Bilder

Rotate


.rotate {
	position: relative;
	line-height: 0;
	outline: 0;
	overflow: hidden;
	border: solid 3px transparent;
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out; 
}

.rotate:hover {
	border: 3px solid #2688E3;
}

.rotate:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out; 
}

.rotate:hover:before {
	background: rgba(0, 0, 0, 0.4);
}

.rotate img {
	min-width: 100%;
	min-height: 100%;
	border: 0;
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out;
}

.rotate:hover img {
	-webkit-transform: scale(1.3, 1.3) rotate(5deg);
	   -moz-transform: scale(1.3, 1.3) rotate(5deg);
	    -ms-transform: scale(1.3, 1.3) rotate(5deg);
	     -o-transform: scale(1.3, 1.3) rotate(5deg);
	        transform: scale(1.3, 1.3) rotate(5deg);
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Hover Effekt für Bilder Hover Effekt für Bilder

Wisch-Wasch


.rotate {
	position: relative;
	line-height: 0;
	outline: 0;
	overflow: hidden;
	border: solid 3px transparent;
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out; 
}

.rotate:hover {
	border: 3px solid #2688E3;
}

.rotate:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out; 
}

.rotate:hover:before {
	background: rgba(0, 0, 0, 0.4);
}

.rotate img {
	min-width: 100%;
	min-height: 100%;
	border: 0;
	-webkit-transition: 400ms ease-in-out;
	-moz-transition: 400ms ease-in-out;
	-o-transition: 400ms ease-in-out;
	transition: 400ms ease-in-out;
}

.rotate:hover img {
	-webkit-transform: scale(1.3, 1.3) rotate(5deg);
	   -moz-transform: scale(1.3, 1.3) rotate(5deg);
	    -ms-transform: scale(1.3, 1.3) rotate(5deg);
	     -o-transform: scale(1.3, 1.3) rotate(5deg);
	        transform: scale(1.3, 1.3) rotate(5deg);
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}