below in my code i wanted to show light when image hover like attached image below nut it didn't work .. is there a way to do this?
.image_block_1 .image-box .image::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.3);
content: '';
-webkit-transition: -webkit-transform .9s;
transition: transform .9s;
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
<div class="image_block_1">
<div class="image-box">
<div class="image">
<img src="./assets/images/About-1.jpg" alt="About-1" class="homeimg" loading="lazy"
style=" max-width: 400px;">
</div>
</div>
</div>
</div>
my code result :
https://i.stack.imgur.com/wSnUh.png
Not sure if this is something you're looking for but you could try it out and see if its what you want
Adds semi-transparent white overlay on image upon hover.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* General Style */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #3b3b3b;
}
.wrapper {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
color:white;
}
/* Image Style */
img {
width: 100%;
height: 100%;
/* Prevent image stretching */
object-fit: cover;
}
h1 {
font-size: 25px;
margin-bottom: 20px;
}
/* Caption Style */
.caption {
position: absolute;
color: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
transform: translateX(100%);
transition: transform 0.3s;
}
.wrapper:hover .caption {
transform: translateX(0%);
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://picsum.photos/200" alt="image">
<div class="caption">
</div>
</div>
</div>
</div>
</body>
</html>
figured out the solution ...
.test-shine {
background-image: url('../images/About-1.jpg');
background-repeat: no-repeat;
height: 500px;
overflow: hidden;
display: inline-block;
}
.test-shine:after {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 20%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
/* Hover state - trigger effect */
.test-shine:hover:after {
opacity: 1;
left: 130%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
/* Active state */
.test-shine:active:after {
opacity: 0;
}
<div class="col test-shine">
</div>
<style>
.container{
position: relative;
top:10px;
width: 200px;
height: 200px;
background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
}
.container .overlay{
background: rgba(223, 218, 218, 0.5);
position: absolute;
margin: auto;
width: 0px;
height: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.container:hover .overlay{
opacity: 1;
width: 100%;
height: 100%;
}
.container:hover .overlay {
opacity: 1;
-webkit-transition: 1.3s ease-in-out;
transition: 1.3s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<a href="#">
<div class="overlay">
</div>
</body>
Related
could you please maybe take a look into this?
I have this code:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
CSS:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: top 0.3s ease-out, right 0.3s ease-out, bottom 0.3s ease-out,
left 0.3s ease-out;
}
.obrazek:hover {
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
}
Codepen:
Codepen link
I want this picture to be smaller on hover. It is working but only for top, bottom and left but the right side is staying the same (I mean it doesn't change its position on hover on the right edge).
Do you have maybe any idea how to fix this and what I did wrong?
Thank you in advance!
Try this:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
transition: 0.3s ease-out;
}
.obrazek:hover {
-ms-transform: scale(0.94, 0.9); /* IE 9 */
-webkit-transform: scale(0.94, 0.9); /* Safari 3-8 */
transform: scale(0.94, 0.9);
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
I have a problem that my transition does not get applied on an absolute positon child div.
Here is my codepen:
https://codepen.io/Data-Mastery/pen/oNvRdGv
On line 213 (&:hover .image) in the SASS file I want to scale the image and also set a filter, which works fine, but the transition-duration does not get applied.
If I just apply the hover statement on the parent element and not the image, the transition works fine. What is wrong here, can anyone help me?
Just add a transition to the .image class (or to the hover function, whatever you want to achieve)
&:hover .image {
transform: scale(1.1);
filter: grayscale(50%);
transition: your parameter;
}
Add transition property to the
& .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
transition:0.5s;
}
This will work for you
Why man , it works see this:-
#import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
#keyframes moveInLeft {
0% {
transform: translateX(-200px);
opacity: 0;
}
80% {
transform: translateX(10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInRight {
0% {
transform: translateX(200px);
opacity: 0;
}
80% {
transform: translateX(-10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.leftanimation {
animation: moveInLeft 1.2s forwards;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.4rem;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem;
}
.l-heading-light {
font-size: 3rem;
color: white;
padding-top: 3rem;
padding-bottom: 1rem;
}
.l-heading-dark {
font-size: 3rem;
color: #c2453b;
padding-top: 3rem;
padding-bottom: 1rem;
}
.primary-btn {
display: inline-block;
background: #c2453b;
color: #fff;
padding: 0.5rem 2rem;
font-size: 1.25rem;
border-radius: 20px;
transition: all 0.3s ease-in;
}
.primary-btn:hover {
background: #fff;
color: #c2453b;
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.primary-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
top: 0;
padding: 1rem;
background: #333;
color: #fff;
}
.navbar__nav {
display: flex;
justify-content: space-between;
}
.navbar__nav li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
.navbar__nav li a:hover {
background: #fff;
border-radius: 5px;
color: #333;
}
.showcase {
background-image: linear-gradient(to bottom right, rgba(194, 69, 59, 0.4), rgba(178, 86, 65, 0.4)), url("https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg");
background-size: cover;
background-position: top;
height: 100vh;
position: relative;
}
.showcase__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
.showcase__content p {
color: white;
font-size: 1.2rem;
margin-bottom: 1rem;
animation: moveInRight 1.2s forwards;
}
.showcase__content a {
animation: moveInBottom 1.2s 0.8s linear backwards;
}
#tours {
text-align: center;
background: #f7f7f7;
}
#tours .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
max-width: 1200px;
justify-content: space-between;
display: flex;
color: #fff;
}
#tours .container .card {
position: relative;
height: 35rem;
width: 20rem;
margin: 2rem 1rem;
padding: 0;
background: #b25641;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
overflow: hidden;
}
#tours .container .card:hover .image {
transform: scale(1.1);
filter: grayscale(100%);
transition-duration: 0.5s;
}
#tours .container .card .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
}
#tours .container .card__content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Malamar Hotels</title>
</head>
<body>
<nav class="navbar">
<h1 class="navbar__logo">
Malamar
</h1>
<ul class="navbar__nav">
<li>Home</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</nav>
<header class="showcase">
<div class="showcase__content">
<h1 class="l-heading-light leftanimation">
Hiking this fall
</h1>
<p>
Book the best hikings tours for this fall in beautiful areas across
europe
</p>
See our tours
</div>
</header>
<section id="tours">
<h1 class="l-heading-dark">Our best offers</h1>
<div class="container">
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Hiking</h1>
<p>2-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Rafting tour</h1>
<p>3-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Mountainbiking</h1>
<p>5-day tour</p>
Book now!
</div>
</div>
</div>
</section>
</body>
</html>
I have created a template which have the page divided in two sections, when I display the site in a desktop resolution all works well, but when I run the site on a smartphone I get the half circle on top and the divider between the two images, not responsive:
Essentially the half red circle, should be reduced in a smartphone resolution, and the divider goes outside the two images, this is what I tried so far:
#media (max-width: 800px) {
.divider{
top: 14.5%;
left: 50%;
height: 64.2%;
transform: translateX(-50%);
}
.circle{
top: -45%;
left: 50%;
width: 500px;
height: 400px;
border-radius: 50%;
}
.logo{
top: 0.5%;
left: 22.5%;
}
}
the problem's that this doesn't cover all the resolution case, so the problem is not fixed at all.
Is there a way to handle all the resolutions and make that template really responsive?
This is my fiddle.
SNIPPET:
body {
background-color: #ffffff;
}
/*Overlay*/
.hovereffect {
width: 50%;
height: 90vh;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #a7151f;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
justify-content: center;
flex-direction: column;
display: flex;
}
.hovereffect img {
float: left;
width: 50%;
height: 90vh;
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 40px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 16px;
}
/*DIVISORE*/
.middle {
position: absolute;
z-index: 9999;
}
.divider {
border-right: 5px solid #a7151f;
position: absolute;
z-index: 10;
top: 14.5%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 76.2%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
}
.circle {
z-index: 10;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.logo {
top: 2.5%;
position: absolute;
left: 41.5%;
width: 200px;
margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Site
</title>
</head>
<body class="sections-page sidebar-collapse">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="hovereffect">
<img class="first">
<div class="overlay">
<h2>First</h2>
<p>
Explore
</p>
</div>
</div>
<span class="divider"></span>
<img class="img-responsive center-block circle">
<span class="circle">
</span>
<img src="#" class="logo" style="z-index: 9999">
<div class="hovereffect">
<img class="second">
<div class="overlay">
<h2>Second</h2>
<p>
Explore
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center justify-content-xl-between">
<div class="col-6">
<div class="copyright text-center text-xl-left text-muted">
© 2019 Credit
</div>
</div>
<div class="col-6">
<div class="row">
Privacy Policy
Terms & Conditions
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
This kind of layout can be achieved with Flexbox with many fewer lines of code. Also, much less HTML markup is required.
Total responsiveness is achieved combining the flexbox behavior with relative units (%, vh, vw).
I put several comments in the CSS to explain what each rule is doing.
body { margin: 0; }
.the-container {
position: relative;
overflow: hidden;
height: 100vh; /* fill the screen */
width: 100vw; /* fill the screen */
}
.the-circle {
position: absolute; /* overlap the pics, removes it from the box flow */
background-color: #a7151f;
border-radius: 50%; /* rectangle becomes an ellipse */
width: 60vw;
height: 30vh;
top: -15vh; /* half of the height */
left: 0; /* these 3 lines... */
right: 0; /* ...keep the "circle"... */
margin: auto; /* ...centered at the top */
}
.the-image-wrapper {
display: flex; /* easy responsive columns */
height: 100%; /* fill the screen */
}
.the-image-wrapper > div {
flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}
.the-image-wrapper > div.the-divider {
flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
background-color: #a7151f;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="the-container">
<div class="the-circle"></div>
<div class="the-image-wrapper">
<div class="first"></div>
<div class="the-divider"></div>
<div class="second"></div>
</div>
</div>
This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 4 years ago.
I try using transform:scale(1.2) to obtain the effect of an appearing circle around the icon. transform I added to the .icon-style:hover::after.
Now this code is commented, please uncomment this code to see what I want to get.
For example I trying doing something like this: click. But scale change position circle.
I read this article, but I don't now how to use transform-origin in my CSS.
Demo: JSFiddle
*{
background-color: black;
}
.pos-footer {
position: absolute;
bottom: 20px;
right: 30px;
}
.icon-social {
display: flex;
}
.icon-social-pos {
position: relative;
}
.icon-style {
position: relative;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.25);
padding: 10px;
border-radius: 50%;
transition: background-color .3s ease-in-out;
}
.icon-style:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.icon-style::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 100%;
height: 100%;
border: 5px solid rgba(255, 255, 255, 0.425);
border-radius: 50%;
padding: 7px;
opacity: 0;
transition: all .4s ease-in-out;
}
.icon-style:hover::after {
opacity: 1;
/* transform: scale(1.2); */
}
.icon-github {
background-image: url("https://img.icons8.com/windows/30/000000/github.png");
margin-right: 10px;
}
.icon-linkedin {
background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");
margin-left: 10px;
}
<div class="pos-footer">
<div class="icon-social">
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-github"></div>
</div>
</a>
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-linkedin"></div>
</div>
</a>
</div>
</div>
First of all, the transform in your hover (.icon-style:hover::after) is overwriting your transform: translate(-50%, -50%);. A way to fix it is to add the translate to the hover too:
.icon-style:hover::after {
opacity: 1;
transform: scale(1.2) translate(-50%, -50%);
}
Then you have to define your transform-origin in .icon-style to top left;
*{
background-color: black;
}
.pos-footer {
position: absolute;
bottom: 20px;
right: 30px;
}
.icon-social {
display: flex;
}
.icon-social-pos {
position: relative;
}
.icon-style {
position: relative;
background-repeat: no-repeat;
background-position: center;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.25);
padding: 10px;
border-radius: 50%;
transition: background-color .3s ease-in-out;
}
.icon-style:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.icon-style::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: top left;
z-index: 1;
width: 100%;
height: 100%;
border: 5px solid rgba(255, 255, 255, 0.425);
border-radius: 50%;
padding: 7px;
opacity: 0;
transition: all .4s ease-in-out;
}
.icon-style:hover::after {
opacity: 1;
transform: scale(1.2) translate(-50%, -50%);
}
.icon-github {
background-image: url("https://img.icons8.com/windows/30/000000/github.png");
margin-right: 10px;
}
.icon-linkedin {
background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");
margin-left: 10px;
}
<div class="pos-footer">
<div class="icon-social">
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-github"></div>
</div>
</a>
<a href="#">
<div class="icon-social-pos">
<div class="icon-style icon-linkedin"></div>
</div>
</a>
</div>
</div>
On hovering on a single element, I'd like for the photo to disappear and the text to appear, along with the box-shadow animation, which I've achieved.
The problem is, when I hover back and forth on either of the first two elements in the top row, the animations for the bottom row elements are triggered and the whole menu gets the jitters!
You'll probably have to view the snippet in full page to see.
Any solutions?
/* ----------------------------------------------
* Generated by Animista on 2018-8-7 19:10:49
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-pop-br
* ----------------------------------------
*/
.shadow-pop-br {
-webkit-animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
#-webkit-keyframes shadow-pop-br {
0% {
box-shadow: 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
box-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red, 6px 6px red, 3px 3px red, 8px 8px red;
-webkit-transform: translateX(-8px) translateY(-8px);
transform: translateX(-8px) translateY(-8px);
}
}
h1 {
font-family: Lato;
font-weight: bold;
font-size: 48px;
text-align: center;
margin: auto;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
max-width: 960px;
margin: 0px auto;
}
.container:hover {
display: flex;
}
.overlay-title {
color: black;
opacity: 0;
font-size: 30px;
font-family: Lato;
font-weight: bold;
position: absolute;
width: 75%;
top: 38%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-description {
color: black;
opacity: 0;
font-size: 20px;
font-family: Lato;
position: absolute;
width: 75%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.card1 {
position: relative;
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
}
.card-img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 178px;
}
.card1:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card1:hover .overlay-title {
opacity: 1;
}
.card1:hover .overlay-description {
opacity: 1;
}
.card2 {
position: relative;
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
margin-left: 30px;
margin-right: 30px;
}
.card2:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card2:hover .overlay-title {
opacity: 1;
}
.card2:hover .overlay-description {
opacity: 1;
}
.card3 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
background-position: center;
background-size: 100px;
background-repeat: no-repeat;
}
.card3:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card3:hover .overlay-title {
opacity: 1;
}
.card3:hover .overlay-description {
opacity: 1;
}
.card4 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-repeat: no-repeat;
background-size: 200px;
margin-right: 15px;
}
.card4:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card4:hover .overlay-title {
opacity: 1;
}
.card4:hover .overlay-description {
opacity: 1;
}
.card5 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
margin-left: 15px;
}
.card5:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card5:hover .overlay-title {
opacity: 1;
}
.card5:hover .overlay-description {
opacity: 1;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio Animations</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="sickmoves.css">
</head>
<body>
<h1>Recent Projects</h1>
<div class="container">
<a href="" class="card1">
<section class="overlay"></section>
<div class="overlay-title">Vroozi</div>
<div class="overlay-description">Landing Page Redesign</div>
</a>
<a href="" class="card2">
<section class="overlay"></section>
<div class="overlay-title">dailyplanet.info</div>
<div class="overlay-description">Responsive Design</div>
</a>
<a href="" class="card3">
<section class="overlay"></section>
<div class="overlay-title">ToiLit</div>
<div class="overlay-description">Native App Design</div>
</a>
<a href="" class="card4">
<section class="overlay"></section>
<div class="overlay-title">Yelp</div>
<div class="overlay-description">Feature Integration</div>
</a>
<a href="" class="card5">
<section class="overlay"></section>
<div class="overlay-title">Kura Sushi</div>
<div class="overlay-description">User Research</div>
</a>
</div>
<script src="" async defer></script>
</body>
</html>
Use this in your code:
.container > a { position:relative; }
You are not using this on all 'a' tag that's why it is happening.