Wordpress Elementor image hover outline effect

Welcome to our latest WordPress Elementor tutorial! In this step-by-step guide, we'll show you how to create beautiful image outline hover effects

Features 

🔸Fully customizable 

🔸Responsive 

🔸Code

  

Tutorial link:

https://youtu.be/Sazb2dYdfls

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist 

🔸Unity Videos playlist 

🔸UI Template Download link 

Download link 

Click here to download Elementor file 

code

<style>

    .img {

  --s: 100px ;  /* the size of the image */

  --b: 5px;     /* the border thickness*/

  --g: 10px;    /* the gap */

  /*The colors*/

  --c1:  #E28B00; 

  --c2: #008D12;

  --c3: #8D0000;

  width: var(--s); 

  outline: calc(var(--s)/2) groove #0009;

  outline-offset: calc(var(--s)/-2);

  cursor: pointer;

  transition: 0.5s;

}

.img:hover { 

  outline-offset: var(--g); 

} 

.img + .img {

  border-radius: 50%;

} 

.img1:hover{

    outline: var(--b) double var(--c1);

}

.img2:hover{

  outline: var(--b) dashed var(--c2); 

}

.img3:hover{

    outline: var(--b) groove var(--c3);

}

</style>