HTML - PHP - MySQL - SVG

KERNI's SEITE

Kleine CSS Animationen

Veröffentlicht am

Den richtigen Effekt zu finden ist nicht ganz einfach. Hier eine kleine Auswahl für hover Effekte. Beim überfahren des Bildes werden die Links angezeigt und können bedient werden.

 

Image leicht vergrößern

 

 

HTML

<div class="img-hover">
   <img alt="" src="images/103_0339.jpg" />
</div>

 

CSS

.img-hover {
   width: 26rem;
   height: 20rem;
   overflow: hidden;
   border: 1rem solid #eee;
}
.img-hover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all .3s linear;
}
.img-hover:hover img {
   transform: scale(1.2);
}

 

hover Effekte

 

Image auf die Seite schieben und Links freigeben

 

Projekt 01

LTS

 

HTML

<div class="box">
   <img alt="" src="images/image.jpg" />
   <h3>Projekt 01</h3>
   <div class="icons">
      <a href="#">L</a>
      <a href="#">T</a>
      <a href="#">S</a>
   </div>
</div>

 

CSS

.box {
   width: 20rem;
   height: 20rem;
   position: relative;
   overflow: hidden;
   border: 1rem solid #eee;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
   background: #fff;
}
.box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   z-index: 1;
   transition: all .2s linear;
}
.box:hover img {
   height: 78%;
   width: 78%;
}
.box h3 {
   position: absolute;
   bottom: .5rem;
   left: 1rem;
   font-size: 2.5rem;
   color: #333;
   text-transform: uppercase;
}
.box .icons {
   position: absolute;
   top: 1rem;
   right: 1rem;
}
.box .icons a {
   display: block;
   height: 2rem;
   width: 2rem;
   border-radius: .5rem;
   background: #eee;
   color: #333;
   font-size: 1.2rem;
   text-decoration: none;
   line-height: 2rem;
   text-align: center;
   margin-bottom: 1rem;
}
.box .icons a:hover {
   background: #bbb;
   color: #fff;
}