Is there a simple way I could create an effect when my mouse touches a div in HTML, css or javascript?

Question

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.

Answer 1

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;
}