Skip to content

Instantly share code, notes, and snippets.

@robhob
Last active January 9, 2018 11:27
Show Gist options
  • Save robhob/bc0ddf1d5cf8ba567bee165a3c230ba6 to your computer and use it in GitHub Desktop.
Save robhob/bc0ddf1d5cf8ba567bee165a3c230ba6 to your computer and use it in GitHub Desktop.
Create a row with as many columns as you want, give each column the CSS Class name of my_col. Under the Advanced tab of the row go to the Custom CSS section and add border: 1px solid #eaeaea; to the main element of each columns custom CSS. Add the CSS of this gist to your custom CSS.
/* For when the mouse moves on to the image */
.brands img:hover {
-webkit-transform: scale(.65) translateY(-4px);
-ms-transform: scale(.65) translateY(-4px);
transition: all .4s ease-in-out;
transform: scale(1.2) translateY(-4px);
}
/* For when the mouse moves off the image */
.brands img {
-webkit-transform: scale(.65) translateY(-4px);
-ms-transform: scale(.65) translateY(-4px);
transition: all .4s ease-in-out;
transform: scale(1) translateY(-4px);
}
.my_col:hover::before {
right: 1px;
left: 1px;
}
.my_col:before {
content: "";
position: absolute;
right: 50%;
bottom: 1px;
left: 50%;
height: 4px;
background: #ee0204;
transition: all .3s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment