I want to achive a simple animation on hover in css, but while hovering off, the animation jumps and makes it look silly. Is there a way to avoid that?
My wish would be that it is colapsing the same way it originaly transformed.
Codepen: https://codepen.io/misah/pen/abzRXvL
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
}
.item:hover::after {
transform: scaleY(2);
transform-origin: bottom;
}
<div class="item">
</div>
This happens because the transform-origin: bottom; is only applied when the item is hovered. When not hovered it falls back to the default - center. Move the rule to the declaration of the ::after.
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
transform-origin: bottom;
}
.item:hover::after {
transform: scaleY(2);
}
<div class="item"></div>
Related
I have created a border-like keyframe CSS style. When I hover the button the border-like animation should start from top-right to top-left then to bottom-left then after to bottom-right and finally to top-right again. When I hover the button the previous sequence should happen and is already created. However; when hovered, the text inside the button moves, which makes the button looks weird.
I looked at the answer to this question, but it's not applicable in my case as I am not using border styling on hover. Instead, I am changing the background color, width, and height of the three spans, not borders.
How can I prevent this shake with the method the animation is created?
CodePen: https://codepen.io/Tes3awy/pen/ZZRpBW
HTML
<div class="wrapper">
<a class="custom-btn" href="https://mince.34way.com/about/" title="About">
About Us
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
</a>
</div>
CSS
body {
position: relative;
height: 100vh;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-btn {
position: relative;
width: 183px;
height: 55px;
line-height: 55px;
display: inline-block;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
border: 2px solid #77a942;
color: #77a942;
text-decoration: none;
}
span[class^="border-"] {
opacity: 0;
}
.border-top {
position: absolute;
top: -2px;
right: 0;
width: 100%;
height: 3px;
background-color: transparent;
}
.border-left {
position: absolute;
top: 0;
left: -2px;
width: 3px;
height: 100%;
background-color: transparent;
}
.border-bottom {
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 3px;
background-color: transparent;
}
.border-right {
position: absolute;
bottom: 0;
right: -2px;
width: 3px;
height: 100%;
background-color: transparent;
}
.custom-btn:hover .border-top {
animation: animateTop .2s 1 alternate ease forwards;
}
.custom-btn:hover .border-left {
animation: animateLeft .2s 1 alternate ease forwards;
animation-delay: .2s;
}
.custom-btn:hover .border-bottom {
animation: animateBottom .2s 1 alternate ease forwards;
animation-delay: .4s;
}
.custom-btn:hover .border-right {
animation: animateRight .2s 1 alternate ease forwards;
animation-delay: .6s;
}
#keyframes animateTop {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 50%;
height: 3px;
opacity: 1;
background-color: #77a942;
}
100% {
width: 100%;
height: 3px;
opacity: 1;
background-color: #77a942;
}
}
#keyframes animateLeft {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 3px;
height: 50%;
opacity: 1;
background-color: #77a942;
}
100% {
width: 3px;
height: 100%;
opacity: 1;
background-color: #77a942;
}
}
#keyframes animateBottom {
0% {
width: 0;
height: 0;
opacity: 0;
background-color:#77a942;
}
50% {
width: 50%;
height: 3px;
opacity: 1;
background-color:#77a942;
}
100% {
width: 100%;
height: 3px;
opacity: 1;
background-color:#77a942;
}
}
#keyframes animateRight {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 3px;
height: 50%;
opacity: 1;
background-color: #77a942;
}
100% {
width: 3px;
height: 100%;
opacity: 1;
background-color: #77a942;
}
}
When you translate things by 50%, they may end up in-between pixels. When you use a transition, CSS tends to change its mind on what pixel it rounds to. Try to make sure that the button you're centering text in has height/width that CSS has a definite position it can settle on when you divide it by half.
I am trying to add a sweep to the right animation on my image so that when you hover the image it sweeps to the right and it shows the text on hover as well. I got this to work just find with buttons but I am lost on how to go about doing this. This is what I have so far with my code:
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
I made some changes to your CSS to make it work smooth and without insane jumping when you hover left side of the image. Here is the CSS and below is the description what changes and why I have made.
.portfolio-box {
position: relative;
overflow: hidden;
display: inline-block;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
transition: all 0.5s ease-out;
display: block;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: all 0.5s ease-out;
}
.portfolio-box:hover .portfolio-mask {
transform: scaleX(1);
opacity: .85;
color: white;
}
Changes I made:
Added display: inline-block; for .portfolio-box - to make it be as big as image inside.
Added display: block; for image to prevent 2-3px empty space under image when it is displayed inline (default).
Added transition: all 0.5s ease-out; for image, to prevent jumping when change position.
I changed transition from transform to all to animate not only move but opacity of mask container.
Animation are now added for hover on .portfolio-box, because it is static container, which is very important for effect you want to achieve - if you add animation on image hover then you will get infinite animation, because when you hover your mouse above image then it will slide to the right and after then it will be no longer hovered so it will go back to initial state and then it will be hovered again so it will go to the right... repeat initity ;)
I think from your description that what you are trying to do is a transform. For this, just add a translateX transform (of your desired size) to the css.
Hope this helps.
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
transform: translateX(5em);
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img class="animate" src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
I need to do a task where I have an image, this image is being covered in some color fade, and when I hover on image - fade dissapears (the example is https://html5up.net/uploads/demos/forty/ ). I did it, but I also have to do a transition so that disappearing of fade will be slower for 2 seconds. I tried to put transition property everywhere and I failed. Any help, please?
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
Instead of this block of code :
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
You can simplify by simply hiding the overlay by modifying its opacity to 0 with the transition of opacity and the duration you need:
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 1s ease-in-out;
}
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
You could just hover over the .img-overlay, but since you also want to have the same effect when hovering over the text, leave it as it is and just replace the :after pseudo-element (don't need it) with the > .img-overlay, set its opacity to 0 and apply the transition property as desired:
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
max-width: 100%; /* responsiveness */
}
.img-overlay {
position: absolute; /* needs to be on the child since the relative position is on the parent */
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 2s linear; /* optional / when "unhovering" */
}
/* added */
.photo-text.one:hover > .img-overlay {
opacity: 0;
transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
I would like to animate two borders on hover specifically border-left and border-top. After doing some research it does not seem you can actually "animate" the borders themselves so you have to create a "line" which on hover should have its width set to 100% to have the same effect.
I know how to do this with underlining menu items, but I would like to do it with this box I'm trying to create.
Specifically on hover (while maintaining the css effects already written up)
1) border-left should extend to the top and right after that-> 2) border-top extending from the left to the right.
Also was wondering how I can choose which borders to extend if I don't want to to just do border-left or border-top.
This is my box thus far (unfortunately nothing with animating borders):
CSS:
#txt{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-size:2vw;
}
#box{
position:fixed;
top:25%;
left:25%;
height:20vw;
width:20vw;
border-right: 2px solid deepskyblue;
border-bottom: 2px solid deepskyblue;
background-color:black;
color:ghostwhite;
}
#box:hover{
color:deepskyblue;
transition: color 0.25s ease;
}
#box:after{
content:"";
position:absolute;
bottom: 0;
left: 0;
width:100%;
height:100%;
transform: scale(0, 0);
transform-origin:bottom right;
background: ghostwhite;
z-index: -1;
transition: transform 0.25s ease;
}
#box:hover::after{
transform: scale(1, 1);
color:deepskyblue;
}
HTML:
<div id="box">
<span id="txt">TEXT</span>
</div>
You can make the #txt element as large as the parent box and then use pseudo-element on that to make "borders" and animate the dimensions of those pseudo-elements.
If you add a transiton-delay in I think you can get the effect you are after.
#txt {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box {
font-size: 2vw;
position: fixed;
top: 1em;
left: 40vw;
height: 20vw;
width: 20vw;
background-color: black;
color: ghostwhite;
}
#box:hover {
color: deepskyblue;
transition: color 0.25s ease;
}
#box:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0, 0);
transform-origin: bottom right;
background: ghostwhite;
z-index: -1;
transition: transform 0.25s ease;
}
#box:hover::after {
transform: scale(1, 1);
color: deepskyblue;
}
#txt::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
height: 0;
}
#txt::before {
width: 0;
border-left: 2px solid deepskyblue;
transition: height .25s .5s ease;
}
#txt:hover::before {
height: 100%;
}
#txt::after {
content: "";
position: absolute;
width: 0%;
top: 0;
left: 0;
border-top: 2px solid deepskyblue;
transition: width 0.25s .75s ease;
}
#txt:hover::after {
width: 100%;
}
<div id="box">
<span id="txt">TEXT</span>
</div>
I've created a Slanted Div, however I ran into problem I cannot solve, I've googled this but did not find any answers.
body {
background: black;
}
#slantedwrapper {
overflow: hidden;
margin-left: 50px;
}
#slanted {
display: inline-block;
/* margin-right:-4px; */
width: 400px;
margin-left: -45px;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
#slanted a {
position: relative;
background-color: #1d1d1d;
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
box-sizing: border-box;
background-size: cover;
/* padding:1em; */
display: block;
transform: skewX(-30deg);
width: 100%;
min-height: 3.5em;
text-align: center;
border-right: 5px solid #20c397;
height: 150px;
/* line-height: 110px; */
overflow: hidden;
}
#slanted span {
color: white;
position: absolute;
box-sizing: border-box;
transform: skewX(30deg);
left: 0;
width: 100%;
/* height: 150px; */
/* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
}
}
.current a {
background:#70cb00;
}
#slanted a img {
transform: skewX(30deg);
overflow: hidden;
margin-top: -20px;
padding-top: 0px;
width: 123%;
height: 123%;
margin-left: -50px;
opacity: 0.6;
-webkit-transition: opacity 0.3s linear 0s;
-o-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;
}
#slanted img:hover {
opacity:1;
}
#caption {
background-color: #333333;
width: 100%;
height: 25px;
display: block;
position: absolute;
bottom: 0;
z-index: 99;
opacity: 0.7;
color: #D2D2D2;
-webkit-transition: background-color 0.3s linear 0s;
-o-transition: background-color 0.3s linear 0s;
transition: background-color 0.3s linear 0s;
}
/*Combination hover effects*/
#slanted:hover #caption {
background-color: #20c397;
opacity:1.0;
}
#slanted:hover img {
opacity:1.0;
}
/* END OFCombo hover effects*/
p.nonskew {
transform: skewX(30deg);
color: White;
margin: 0;
margin-left: 22%;
padding: 1.5%;
text-align: left;
font-size: 0.8em;
}
<div id="slantedwrapper">
<div id="slanted">
<a href="#">
<div id="caption">
<p class="nonskew">A Caption: Description</p>
</div>
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" alt="SLANTED DIV"></a>
</div>
<!--end of wrapper-->
</div>
JSFiddle version
here's the problem:
Hover over the div, it hovers fine, but at the bottom right corner, where nothing is there (where the overflow is hidden) still hovers if you place your mouse over the blank area where the angle begins, how do I solve this into when it hovers- it only applies to shape of the div only?
Thank you
You seem to have the right idea, using both the unskew and intuitive to using the skew, however, something like the below example may work for you:
html {
background: radial-gradient(#222, blue);
height: 100%;
}
div.wrap{
height: 150px;
width: 300px; position: relative;
overflow: hidden;
}
div.innerwrap {
height: 100%;
width: 100%;
transform: skewX(-30deg);
position: absolute;top:0;left:0;
overflow: hidden;
margin-left: -70px;
transition: all 0.4s;
border-right: 5px solid tomato;
cursor:pointer;
}
div.innerwrap:hover span {
background: gold;
}
div.innerwrap:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/300/300);
transform: skewX(30deg);
transform-origin: top left;
}
div span {
position: absolute;
bottom: 0;
left: 0%;
width: 120%;
transform: skewX(30deg);
background: red;
text-align:center;
transition: all 0.4s;
}
<div class="wrap">
<div class="innerwrap">
<span>TITLE</span>
</div>
</div>
For further information, #Harry has created a wide variety of examples here in which you may find useful.