Question

Views

I am trying to reproduce this effect, whenever the mouse touches a div, the div get surrounded by some sort of container like this

Please any idea how I could archive this. A demo can be found at https://io.google/2022/ on the grow your skill section.

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-06-30T03:07:55.559Z

You can use :hover with border, outline and border radius for this to happen

heres the CSS:

.container:hover{
   border: 1px solid white;
   border-radius: 10px;
}

Also make sure to add a regular border in the container or if we hover, it has to create new borders that can cause it to jump from its place

Just add a transparent border:


.container {
   border: 1px solid transparent;
}