Is there a simple way i could create an effecr when my mouse touches a div in htlm, css or javascrip-CodePudding

Hi 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.

CodePudding user response：

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