REKLAMNÍ AGENTURA

Four Linkable Image Hover Effects Demo

Shutter

Image Hover Effect

/*-----Fade Effect-----*/.ds-hover-3 { display: inline-block; position: relative; }.ds-hover-3 img { display: block; max-width: 100%; }.ds-hover-3::before, .ds-hover-3::after { opacity: 0; position: absolute; width: 90%; color: #fff; padding: 5%; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; }.ds-hover-3::before { content: attr(ds-title); top: 0; height: 10%; background: rgba(0,0,0,0.5); font-size: 40px; text-transform: uppercase; font-weight: 300; }.ds-hover-3::after { content: attr(ds-desc); top: 25%; height: 60%; width: initial; background: rgba(255,102,0,0.5); font-size: 16px; text-align: right; }.ds-hover-3:hover::before, .ds-hover-3:hover::after { opacity: 1; }

Push Right

Image Hover Effect

Fade

Image Hover Effect

Push Left

Image Hover Effect

× Jak vám můžeme pomoci?
TOPlist