Skip to content

Instantly share code, notes, and snippets.

@lettergram
Last active September 19, 2019 07:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lettergram/13c973c020db217867d7c7d400c505fe to your computer and use it in GitHub Desktop.
Save lettergram/13c973c020db217867d7c7d400c505fe to your computer and use it in GitHub Desktop.
/* For use on InsiderOpinion.com */
.demo-container {
border-radius: 20px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);
}
.demo-container:hover .demo-vid { opacity: 0.4; }
.demo-container:hover .demo-img { opacity: 0.4; }
.demo-container:hover .demo-box-try { opacity: 1.0; }
.demo-img {
width: 100%;
height: auto;
align: right;
margin: 40px 0;
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
border-radius: 20px;
}
.demo-vid {
width: 100%;
height: auto;
align: right;
margin: 40px 0;
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
border-radius: 20px;
}
.demo-box-try {
font-size: 12px;
transition: .5s ease;
opacity: 0.0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.demo-text {
opacity: 0.9;
font-weight: 500;
background-color: #23527c;
border-radius: 100px;
padding: 14px 40px;
color: white;
font-size: 16px;
}
.demo-text:hover {
opacity: 1.0;
background-color: #5b94c5;
border-radius: 100px;
padding: 14px 40px;
border: 2px solid #494c54;
color: white;
font-size: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment