CSS3 Focus Effect (Box-Shadow)

by. SiTamvan.com

by Rian .N Herdian

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit sint illum? Quaerat necessitatibus molestiae aspernatur perferendis in, et. Officiis eius a quia praesentium nulla. Rem temporibus, magnam quae distinctio.

<img class="fokus" src="https://dummyimage.com/200x150/FFBA00/1a1a1a&text=Sentuh+Aku+Gengs!"/>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.

CSS

img {
  display:block;
  margin: 20px auto;
}
.fokus:hover {
  position:relative;
  z-index:100;
  box-shadow:0 0 0 1000vw rgba(0,0,0,0.4);
}