I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.
Here is a webpage that has the css slider:
http://melodywai.com/sodium.html
And here is a snippet of the CSS stylesheet that relates to the arrows:
.carousel-wrapper { position: relative; }
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
height: 500px;
width: 750px;
margin-left: auto;
margin-right: auto;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.
Thanks!
try adding
.carousel-wrapper .carousel-item .arrow:hover{
//do something
}
you can target them this way.
a.arrow.arrow-prev:hover {
}
a.arrow.arrow-next:hover {
}
to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:
a.arrow.arrow-prev:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-prev.png"); // to change the arrow img
}
a.arrow.arrow-next:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-next.png"); // to change the arrow img
}
this is a simple solution and it will look good with the transition effect.
Tell me if this helps you or you need more suggestions
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I am trying to get the title to stick to the bottom of the hover box, so that when the user hovers over the title, the hover box appears with the title on the bottom. It should close from the title upwards, so that the entire box is covered by the description, but the title remains on the bottom. How do I get the hover box to appear with the title not moving?
I attached my code below so that you can see what I am talking about. When you hover over the h1 pictureTitle, it goes towards the middle of the picture because of the transform effect. I want it to remain at the bottom, and have the black background close upwards from the title, so that the hover box seems like it is a part of the title.
.img__wrap {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
visibility:hidden;
}
.img__wrap:hover .img__description {
opacity: 1;
background:black;
height:100%;
visibility:visible;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle{
background:black;
height:50px;
width:200px;
position:relative;
bottom:70px;
text-decoration:none;
color:red;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture"
class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
1. Title stay bottom issue
The title is staying in the same position. It doesn't move. You need to move it together with the image resizing. As the image is resizing to cover the full img__wrap div, you should change the bottom value of the pictureTitle from 70px to 0px and also add a transition to it. And so, it will move together with the image and always position it self at the bottom of the image
So your question is a wrong. You have to move the title otherwise it will stay in the same position as initially set.
2. Expand black background from bottom to top
Here is another problem with your code. You want to transition visibility:hidden to visibility: visible . This is not possible because you cannot animate non numeric values like visibility:hidde/visible or display:none/block. You should just use opacity:0 and opacity:1 on hover.
Then position the img__description at the bottom ( bottom:0 without top:0 ) and add an initial height of 0px . Then at hover add height:100%
Let me know if you have other questions. Cheers! :D
.img__wrap {
position: relative;
height: 190px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: 0.2s;
margin: 0;
background: black;
height: 0;
}
.img__wrap:hover .img__description {
opacity: 1;
height: 100%;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle {
background: black;
height: 50px;
width: 200px;
position: relative;
bottom: 70px;
text-decoration: none;
color: red;
transition: 0.5s;
}
.img__wrap:hover .pictureTitle {
bottom: 0;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture" class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
use picture of 200x200 if your want to use height or for now add height:200px to class .picture image will stretch but it will resolve your problem, so instead of this use a perfect image 200x200
I am building a lightbox based on the CSS3 selector :target which selects an element based on the hash in the url. I want to animate the target element on the :target event, but this doesn't seem to work.
Let's say we have a div #banana which is shown when a link to #banana is pressed.
#banana {display: none;}
#banana:target {display: block;}
This works fine. But when trying to animate the element, that doesn't work. See this fiddle.
div#banana {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
}
div#banana:target {
display: block;
opacity: 1;
}
The element won't fade in. It is as if the browser skips the animation and immediately triggers the end result.
The problem is that you are changing the display property. The display property can't be transitioned since you can't really animate an element turning from nothing into a block.
The display property can be left out altogether. You will however need to give your element visibility: hidden so that it will not prevent the link from being clicked, then transition it to visibility: visible:
div#banana {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
visibility: hidden;
}
div#banana:target {
opacity: 1;
visibility: visible;
}
Updated fiddle
It's not possible to animate display property. There is simply no gradual stages between none and block.
In your case you can "hide" element by using huge negative top position and revert it back to 0 on target event. Actual transition will be handled by changing opacity.
div#banana {
position: fixed;
left: 0;
top: -1000px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 1s linear;
}
div#banana:target {
top: 0;
opacity: 1;
}
<div id="banana">
close
</div>
Do you want a banana? Click me!
I try to make image gallery using bootstrap and my custom CSS. I want to make if the user hover on the image, the picture will getting bigger on its place. Everything is done by only using css but I have a little problem regarding the grid of my image. When I hover the most right image, the position will be mess. Here is my experiment : http://hanzoclothing.com/lookbook/chapter-iii
CSS:
.lookbook-item{
position: relative !important;
}
.lookbook-item:hover{
z-index: 5;
}
.lookbook-item .thumb{
opacity: 1 !important;
}
.lookbook-item .thumb img{
-webkit-transition: all 1s ease-in-out;
transition: all 0.3s ease-in-out;
}
.lookbook-item .thumb:hover img{
position: absolute;
min-width: 600px;
max-width: 600px;
margin-top: -40px;
margin-left: -50px;
/* top: 200%;
left: 23%;*/
z-index: 6;
}
I'd be tempted to use transform: scale(xxx); for this. It will do exactly what you want without effecting other elements:
.lookbook-item .thumb:hover img {
/* position: absolute; */
/* min-width: 600px; */
/* max-width: 600px; */
/* margin-top: -40px; */
/* margin-left: -50px; */
z-index: 6;
transform: scale(2);
}
If you want to keep the offset you currently have, you could use the following:
transform: scale(2) translate(50px, 40px);
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition