I'm looking for CSS to make an image transition 5px to the right smoothly. I have the move and opacity sorted, but am unsure how to make it run smoothly and not seem like a big jump when hovering.
Have the following code but don't really know how to do the transition correctly. Any help is much appreciated!
.naviconmain {
transition: all 2s ease;
opacity: .7;
display: block;
align: right;
margin-left: auto;
margin-right: 15px;
}
.naviconmain:hover {
opacity: 1;
position: relative;
left: 4px;
}
Thanks for all the help - very much appreciated. I've gone with:
.naviconmain {
transition: all 2s ease;
opacity: .7;
display: block;
align: right;
margin-left: auto;
margin-right: 15px;
}
.naviconmain:hover {
opacity: 1;
position: relative;
transform: translateX(4px);
transition: all 0.5s ease-in-out;
}
Related
I came across a strange issue on Safari. Please take a look at: https://codepen.io/enguerranws/pen/PomzqWe
If you go hover the lightly red box, you'll notice a transition on an element inside.
If you test it in Chrome or Firefox, the animation runs as expected: it's a small black circle that scales up.
On Safari, it goes weird: it's a black square with some kind of transparency that goes round and fully opaque when the transition ends.
Here's the relevant part of code:
#test:hover #circle {
transform: scale(200);
}
#circle {
position: absolute;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
/* transition: all 1s ease; */
width: 2px;
height: 2px;
top: 30px;
border-radius: 10px;
mix-blend-mode: difference;
background-color: #000;
}
Does anyone as quick and dirty hack for this?
EDIT:
Actually, I found a way to get around this issue using width and height values for transform.
Try to use will-change: transform;. Added to your code:
#test {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
padding: 40% 10px;
background: rgba(255,0,0,.1);
}
#test:hover #circle {
transform: scale(1);
}
#circle {
position: absolute;
transition: transform .5s ease-in-out;
will-change: transform;
transform: scale(.005); /* point */
transform-origin:left top;
width: 2px;
height: 2px;
top: 30px;
border-radius: 400px;
width: 400px;
height: 400px;
background-color: #000;
}
<div id="test">
<div id="circle"></div>
Text here
</div>
Alright, here's what I have a nifty little scroller (they've been done to death but I wanted to take my hand at making one) and I want it to scroll to the left for X amount of pixels, which is no problem. The problem is, if the user hovers over the left side and starts scrolling the text back, I want it to stop at its initial starting point.
body {
background-color: black;
}
.wrapper {
position: absolute;
left: 50%;
margin-left: -250px;
overflow: hidden;
width: 500px;
height: 300px;
z-index: 98;
border: 3px solid 2a3439;
background-color: #353839;
}
.scroller {
color: white;
width: 1980px;
background-color: transparent;
height: 100%;
position: relative;
padding: 5px;
margin-left: 0px;
transition: all 2s linear 10s;
-moz-transition: all 2s linear 10s;
-webkit-transition: all 2s linear 10s;
}
.go-left:hover~.scroller {
margin-left: -250px;
transition: all 2s linear;
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear ;
}
.go-left {
opacity: 0;
height: 300px;
background-color: red;
width: 200px;
z-index: 99;
position: absolute;
top: 0;
}
.go-right {
opacity: 0;
height: 300px;
background-color: red;
width: 200px;
z-index: 99;
position: absolute;
top: 0;
left: 300px
}
.go-right:hover+.scroller {
margin-left: 250px;
transition: all 2s linear;
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
}
.image {
display: block;
overflow: hidden;
Height: 490px;
}
In that example, if you hover to the left I don't want it to move past it's starting point, so clamping it. You can see the working model on jsfiddle https://jsfiddle.net/Kaanha/puy6t4og/51/
This wouldn't be hard using some java, but the main thing here is, I need it to be pure CSS only. No java.
Thanks in advance for all help!
I'm trying to create a scrolling photo banner. It is working on IE, safari (mobile), and chrome on android and iphone. It is not working on my desktop or if I request desktop site on any chrome device. I've spent hours googling trying to figure this out and cannot work it out at all.
This is my first time asking a question so if something is wrong in my post please bear with me. Thank you
#container {
width: 100%;
overflow: hidden;
margin: 5px;
background: white;
}
.photobanner {
height: 350px;
width: 3550px;
margin-bottom: 10px;
}
.photobanner img {
margin: 10px;
max-height: 300px;
margin-top: 30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
/* Landscape phones and down */
#media (max-width: 750px) {#container {
width: 100%;
overflow: hidden;
margin: 5px 5px;
background: white;
}
.photobanner {
height: 160px;
width: 3550px;
margin-bottom: 5px;
}
.photobanner img {
margin: 5px;
max-height: 150px;
margin-top: 5px;
}
}
I hope this answer is not coming too late, but I just fixed an issue similar to yours so thought I would share my solution.
Put your general animation rule after the browser specific ones. See this answer (css3 animation not working in chrome).
You may need to open your website in an "incognito" tab! Stylesheet changes may not update immediately due to browser cookies.
I'm working on an app that seems to be using CSS overlays. I have a basic understanding of CSS but not an expert.
In the style.css I see two classes:
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 0;
visibility: hidden; }
I'm using this in a React app and I need help with closing the overlay.
I simply render a component and set its isShown property to true and I'm able to open up the overlay.
However, I'm not sure about how to close it. Even if I set the isShown value to false in my redux store, the overlay still sits there.
I'd appreciate some help with closing the overlay. Thanks.
hope it helps!
.modal-wrapper.hide {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
I suggest setting your z-index to -1 or something lower, as the overlay will sit-on-top of other elements.
.modal-wrapper.hide {
opacity: 0;
visibility: hidden;
z-index: -1;
}
Please try this code
HTML
<div class="modal-wrapper"></div>
<div class="modal-wrapper hide"></div>
CSS
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 1;
visibility: visible;
width: 20px;
cursor:pointer;
background-color: transparent;
margin: 10px 20px;
height: 20px;
}
.modal-wrapper.hide:after, .modal-wrapper.hide:before {
content: "";
width: 2px;
height: 20px;
background: #fff;
display: inline-block;
transform: translatex(-1px) rotate(45deg);
}
.modal-wrapper.hide:before{
transform: translatex(0) rotate(-45deg);
}
Jsfiddle
I have a picture that when you hover over it, a fading caption would appear
Here is the jfiddle
https://jsfiddle.net/e9dwbdyn/4/
I want it to look like this however:
I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!
figcaption {
position: absolute;
top:35%;
width: 80%;
height:50%;
left:10%;
font-size: 14px;
color: white;
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Try this one https://jsfiddle.net/e9dwbdyn/6/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:30%;
width: 80%;
height:40%;
left:10%;
font-size: 20px;
font-family: "Arial, Helvetica, sans-serif";
text-align: center;
color: white;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
opacity: 0.5;
}
.product-name a {
color: #fff;
}
.product-name a:hover {
color: #fff
}
.product-name, .desc_grid, .price {
padding: 0px;
margin: 0px;
}
}
You would still need to play around with some margins, text fonts and sizes to get the exact match.
you may use figcaption as flex container
https://jsfiddle.net/e9dwbdyn/5/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
display:flex;
font-size: 14px;
color: white;
}
figcaption>div {
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
margin:auto;
text-align:center;
width:80%;
}
figure:hover figcaption div {
opacity: 0.7;
}
.product-name
<figure>
<img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
</a>
<figcaption>
<div class="product-shop">
<h3 class="product-name">Candlesticks<span class="over"></span></h3>
<p class="desc_grid">lorem ipsum</p>
<div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
</div>
</div>
</figcaption>
</figure>
When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.
In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.
Example 1 (height determined by the content inside) works with browsers from IE9 and up:
figcaption {
position: absolute;
top: 50%; /* Always 50% from the top */
transform: translateY(-50%); /* Extracting half of the content height to vertically center */
width: 80%;
left: 0;
right: 0;
opacity: 0;
margin: 0 auto;
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
transition: opacity .5s;
}
figure:hover figcaption {
opacity: 1;
}
Example 2 (fixed height) should work in all browsers:
figcaption {
position: absolute;
height: 50%; /* Fixed height */
width: 80%;
top: 0; /* Filling the whole space with top, left, bottom, right */
left: 0;
right: 0;
bottom: 0;
opacity: 0;
margin: auto; /* Using margin: auto; the space around is distributed evenly */
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7);
transition: opacity .5s;
}
In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.