I'd like to be able to have the div shine-box go across the image automatically from the top left ever like 3 seconds, left to right, left to right etc.
This is the current code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: darkblue;
}
img {
border: 0;
}
.shine-box {
position: absolute;
width: 200px height: 200px;
overflow: hidden;
border-radius: 40%;
}
.shine-box:before {
position: absolute;
top: 0;
left: -500px;
content: "";
width: 120px;
height: 500px;
background: rgba(255, 255, 255, 0.6);
transform: skew(-50deg);
transition: 1s;
}
.shine-box:hover:before {
left: 655px;
}
<div class="shine-box">
<img class="neko" src="neko-fin.png" alt="neko.png">
</div>
Is this something you are looking for. As #Pete suggested you have to use CSS animation instead of transition
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: darkblue;
}
img {
border: 0;
width: 100%;
}
.shine-box {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 40%;
}
.shine-box:before {
position: absolute;
top: 0;
left: -500px;
content: "";
width: 120px;
height: 500px;
background: rgba(255, 255, 255, 0.6);
transform: skew(-50deg);
/* transition: 1s; */
animation: shine 3s ease infinite;
}
#keyframes shine {
from {left: -500px;}
to {left: 655px;}
}
/* .shine-box:hover:before {
left: 655px;
} */
<div class="shine-box">
<img class="neko" src="data:image/jpeg;base64,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" alt="neko.png">
</div>
Related
So I want to create this animation where basically this happens:
When you hover on an icon, it gets bigger, increases in opacity, and some text appears.
In addition to this, 2 lines of color extend in width from the center out to the sides, then they increase in height.
The bottom color should expand downwards, while the top color should expand upwards.
I created this test-base and was wondering how I would go about making this from here. I tried tweaking the height, width, and opacity but those also edit the icon, so I'm wondering if I'm taking the wrong approach or just doing it wrong. Any help and/or pointers are appreciated.
Current code:
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
background: #191919;
overflow: hidden;
}
.hoverCard::before {
background: blue;
content: "";
position: absolute;
width: 100%;
height: 50%;
transition: 0.5s;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="../Media/Link-Logos/Discord.png">
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
As the requirement is to have lines drawn and expanding when the image is hovered, and the image itself cannot have pseudo elements, this snippet adds a further element after the img, .lines.
This is positioned absolutely and sized relative to the overall card (parent) element.
It has before and after pseudo elements which draw lines and then expand vertically using a CSS animation.
As I was unclear what you wanted to happen about the line going downwards (if it keeps the same background color as the card then of course it can't be seen) so this snippet makes it pink.
Of course you will want to alter timings and perhaps dimensions to suit your specific requirements, this is just a simple example to demonstrate one possibility.
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
overflow: hidden;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
.lines {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
display: flex;
justify-content: center;
background-color: #191919;
}
.lines::before,
.lines::after {
content: '';
margin: 0 auto;
position: absolute;
width: 160px;
height: 10px;
opacity: 0;
}
.lines::before {
background-color: blue;
bottom: 50%;
}
.lines::after {
background-color: pink;
top: 50%;
}
#keyframes expand {
0% {
opacity: 0;
width: 160px;
height: 10px;
}
9.99% {
opacity: 0;
}
10% {
width: 240px;
opacity: 1;
}
50% {
width: 100%;
height: 10px;
}
100% {
opacity: 1;
width: 100%;
height: 100%;
}
}
.mainImg:hover~.lines::before,
.mainImg:hover~.lines::after {
display: block;
animation: expand 3s linear forwards 0.3s;
}
</style>
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="https://picsum.photos/id/1015/200/200">
<div class="lines"></div>
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
I'm trying to make the hr tag to animate from left to right and repeat,
and stay kinda center under the h2 tag,
but the animation not working... is anyone know why?
.div-projects {
margin-top: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.div-projects h2 {
font-size: 55px;
padding: 90px;
color: white;
transform: skewY(-9deg);
}
.hr-projects {
width: 20%;
border-radius: 30px;
z-index: 2;
left: 900px;
bottom: 60px;
transform: skewY(-6deg);
border: 3px solid rgba(0, 136, 169, 1);
position: relative;
animation: alternate hr 19s infinite;
}
#keyframes hr {
from {
left: 900px;
}
to {
right: 600px;
}
}
<div class="div-projects">
<h2>Projects</h2>
</div>
<hr class="hr-projects">
You need to make animation/transition on same property.
So far example change from left 0 to left 100%, or left:50px to left:200px etc.
.div-projects {
margin-top: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.div-projects h2 {
font-size: 55px;
padding: 90px;
color: white;
transform: skewY(-9deg);
}
.hr-projects {
width: 20%;
border-radius: 30px;
z-index: 2;
left: 900px;
bottom: 60px;
transform: skewY(-6deg);
border: 3px solid rgba(0, 136, 169, 1);
position:relative;
animation:alternate hr 19s infinite;
}
#keyframes hr {
from {
left: 0;
}
to {
left: 100%;
}
}
<div class="div-projects">
<h2>Projects</h2>
</div>
<hr class="hr-projects">
On mouse hover, animated span tags beneath an img work fine when the img isn't using object-fit: contain like below:
body {
height: 100%;
width: 100%;
margin: 0
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
}
.product {
position: relative;
width: 150px;
}
img.content {
background: white;
height: auto;
margin: 8%;
position: relative;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<p>Hover image please</p>
<div class="product">
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
</div>
</div>
</body>
But when the img is using object-fit: contain the animated spans take up the entire area:
body {
height: 100%;
margin: 0;
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 700px;
}
.product {
height: 100%;
position: absolute;
}
.content {
background: white;
margin: 8%;
position: relative;
width: 84%;
height: 100%;
vertical-align: middle;
z-index: 5000;
object-fit: contain;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
How do you make these hover effects apply only to the area around the image (not the entire area) when using object-fit: contain? The image must remain vertically centered using object-fit.
Is this what you wanted? The image is centered between the animated divs.
The reason why your image is larger in the second example you've given is because you've changed your CSS there. You've changed the height/width values of .container, .product etc, so the children elements are showing up larger, because they inherit these values.
I've changed max-width and min-height in .container to reduce the overall size. And the width of .content should be less than the width of the effect divs
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
max-width: 300px;
/* This is new */
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 300px;
/* This is new */
}
.product {
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
display: flex;
align-self: center;
background: white;
margin: 0 auto;
position: relative;
width: 65%;
/* This is new */
object-fit: contain;
/* This is new */
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: flex;
}
.effects {
position: absolute;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: flex;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
visibility: visible;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
object-fit: contain;
display: flex;
margin: 0 auto;
align-self: center;
position: relative;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effects">
<img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"></span>
<span class="effect-2"></span>
</span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
hi i have a div and i want to put it as the scrollbar. this is the image of my div
i used this style "overflow-y: scroll;" but it's not what i'm looking for
this is my html tag
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: scroll;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
what should I do???
You should change overflow-y: scroll; to overflow-y: auto;. For example:
.mouse {
overflow-y: auto;
}
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: auto;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
Of course you can delete overflow-y from .mouse
Fiddle: https://jsfiddle.net/0qqnvrdg/
HTML:
<div class="loading"></div>
CSS:
body {
background: #0d8aa5;
}
.loading {
position: absolute;
left: 50%;
top: 25%;
/*margin: -60px 0 0 -60px;*/
background: #fff;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.loading:before {
background-image: url('http://i.stack.imgur.com/UTnLP.png');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 85%;
height: 85%;
content:"";
position: absolute;
top: 20%;
left: 10%;
}
How can I modify the CSS to that the image is under the thin blue border while being on top of the white.
Is that possible?
added z-index: -1000; for under.
ps: nice effect for scrollbar )
body {
background: #0d8aa5;
}
.loading {
position: absolute;
left: 50%;
top: 25%;
/*margin: -60px 0 0 -60px;*/
background: transparent;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.loading:before {
background-image: url('http://i.stack.imgur.com/UTnLP.png');
background-size: cover;
background-repeat: no-repeat;
display: block;
width: 100%;
height: 100%;
content: "";
position: absolute;
border-radius: 50%;
z-index: -1000;
}
<div class="loading"></div>
.loading {overflow: hidden} - just add this line
It is Because You are adding Background image before div.loading that makes images as content.Instead add background image to div.