Can any one tell me why owl slider's navigation buttons flickering when hovered?
These are the '+' plus sign images.
http://kmg.makingconnection.co.uk/
Thankyou 'dingo_d'. By doing left:0 & right:0 along with position: absolute solved my problem.
Your buttons have opacity over them at 0.5, and when you hover there is a change in the opacity to 1
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
filter: Alpha(Opacity=100);
opacity: 1;
text-decoration: none;
}
Because you are using background as a plus sign, every time you are hovering over it you apparently trigger that change that results in a flicker. It's better to use pseudoelements for this (even though when you turn the opacity down you can see a bit of overlap)
#owl-demo .owl-prev{
float: left;
margin-left: 65px;
font-size: 0;
width: 32px;
height: 31px;
position:relative;
background:transparent;
}
#owl-demo .owl-prev:before,
#owl-demo .owl-prev:after{
content:"";
position:absolute;
top:0;
left:50%;
margin-left:-4px;
width:8px;
height:32px;
border-radius:3px;
background: #ED1B34;
opacity:0.5;
}
#owl-demo .owl-prev:after{
transform: rotate(90deg);
}
#owl-demo .owl-prev:hover:before,
#owl-demo .owl-prev:hover:after{
opacity:1;
}
Related
I have a button that is in the exact center of is container:
.menu-heading{
transition: top $speed;
cursor: pointer;
display: block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
when is parent get the is-expanded class, the button moves to the top left of the page:
.is-expanded &{
top:0;
left: 0;
transform: scale(.5);
cursor: default;
z-index: 9999;
}
Now I would be able to recreate this behaviour with transform translate property, instead using positioning, but I'm not sure if it is doable, with top:0 and left:0 I get the same result on all kind of resolution, with transofrm translate not.
this is the container with class is-expanded.
.section.is-expanded{
position:absolute;
width:100%;
height:100%;
z-index:1000;
left:0;
top:0;
oveflow:hidden
}
I know 3d-transforms and z-indexes don't work especially well together, but I'm having this issue (only in Safari) for which I'm hoping there's still a solution.
Basically, I have 2 elements on top of each other. The one in the "back" (with the lower z-index) is being rotated in 3d space. I would still however like the top element to be on top at all times.
.button {
padding: 10px 30px;
position: relative;
display: inline-block;
color: white;
cursor: pointer;
}
.button span {
position: relative;
z-index: 2;
}
.button:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: red;
transition: transform .2s;
}
.button:hover:after {
transform: rotateY(30deg);
}
<div class="button">
<span>Text</span>
</div>
This works well in Chrome and Firefox (haven't tested IE yet), but in Safari the back element "cuts through" the top element, making half of the top element invisible.
I've tried setting transform:translate3d(0,0,0) to the top element and also transform-style:preserve-3d to the parent element, with no success.
I've seen other posts about this on here, but they all seem to be outdated and the solutions don't seem to work.
You can see a fiddle here: https://jsfiddle.net/6mtgts33/
Add following:
.button span {
display: inline-block;
transform: translateZ(100px);
}
https://jsfiddle.net/6mtgts33/2/
.button { padding:10px 30px; position:relative; display:inline-block; color:white; cursor:pointer; }
.button span { position:relative; display: inline-block; transform: translateZ(100px); z-index: 2; }
.button:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:10px; background:red; transition:transform .2s; }
.button:hover:after { transform:rotateY(30deg); }
<div class="button">
<span>Text</span>
</div>
Actually you don't need z-index: 2 for Safari, but need it for Chrome still.
Haven't checked in other browsers.
transform: rotateY(30deg);
-webkit-transform: rotateY(30deg); //chrome and safari
I'm trying to make a simple CSS3 hover effect over the image. I'm trying half the image to show transparent. To make it easier to see the issue, I've set it as black.
<div class="section">
<img src="http://placekitten.com/110/155" />
<div class="efx" />
</div>
.section{
width:700px;
background-color:orange;
height:170px;
position:relative;
margin:50px;
}
.section:hover .efx{
height:155px;
}
img{
width:110px;
height:155px;
}
.efx{
overflow:hidden;
background-color: black;
z-index: 10;
left: -51px;
position: absolute;
height: 0px;
width: 105px;
transition: all .5s ease-in;
transform: skew(35deg, 0deg);
bottom:15px;
}
If you look at the Fiddle here http://jsfiddle.net/5ST86/ you can see what the result is. Below is what I'm trying to achieve.
Just add overflow:hidden to the section element.
jsFiddle example
.section{
width:700px;
background-color:orange;
height:170px;
position:relative;
margin:50px;
overflow:hidden;
}
Since I've animated my images (a caption appears when hovered), the images stack vertically instead of horizontally when viewed on Chrome. Here is the url - http://goodyearsinc.com/releases
I've tried adding "float: left" to the img wrap which worked on Firefox but not on Chrome. I am pulling my hair out trying to work it out.
Here is the jsfiddle with the css - http://jsfiddle.net/8eTB2/
.item1, .item2, .item3, .item4
{
float:left;
}
.img-wrap{
height:150px;
overflow:hidden;
position:relative;
float: left;
margin-right: 5px;
}
.img-overlay{
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
Remove the float: left from the
.item1, .item2, .item3, .item4 {
float: left;
}
Try adjusting the width manually, on Chrome the width is 327px where firefox showed 465px.
I'm trying to create a zoomable map that works when the mouse hovers over the map image, similar to how the maps work on Flickr (see the map on the right side-bar - http://www.flickr.com/photos/grynch108/5926065001/in/photostream/).
By default the map is zoomed out, when the mouse hovers over the map, it zooms in, and when the mouse hovers in the center of the map, it zooms further to street level.
I want to achieve this purely using CSS if possible (no JavaScript). I have it mostly working (it zooms in when mouse hovers over, and zooms again when mouse nears the center), however, after the mouse nears the center and it zooms fully, it will not zoom out again unless the mouse leaves the element completely. I would like it to zoom to the second level when the mouse leaves the center area. I hope that makes sense.
Here is a JSFiddle of what I have working. http://jsfiddle.net/garethlewis83/ejvRh/
NOTE: The CSS is generated from SASS, so I've included my SASS code below.
aside.photo-sidebar {
margin-left:20px;
width:296px;
display: inline-block;
vertical-align: top;
div#photo-map {
position: relative;
a#map-zoom-out, a#map-zoom-in {
position:absolute;
height: 100px;
width: 300px;
top:0;
left:0;
}
a#map-zoom-out {
opacity: 1;
z-index: 10;
transition: all 0.25s ease;
&:hover {
opacity: 0;
}
}
a#map-zoom-in {
z-index: 5;
}
a#map-zoom-street {
height: 20px;
left: 140px;
opacity: 0;
position: absolute;
top: 40px;
width: 20px;
z-index: 20;
transition: all 0.25s ease;
&:hover {
opacity: 1;
img {
display: block;
}
}
img {
display: none;
margin: -40px 0 0 -140px;
}
}
}
}
If you would consider using background images you could do something like this:
<div class="marker" href="#">°</div>
<div class="mymap"></div>
CSS:
.mymap {
position:absolute;
width:4px;
height:16px;
padding:42px 148px;
background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
z-index:1;
}
.marker{
position:absolute;
top:22px;
left:121px;
padding:20px 27px 15px;
background:none;
z-index:2;
color:red;
}
.mymap:hover {
background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
}
.marker:hover + .mymap {
background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
}
Note the use of the adjacent selector to do the final zoom.
jsfiddle
in Sass it would be pretty simple:
.mymap {
position:absolute;
width:4px;
height:16px;
padding:42px 148px;
background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
z-index:1;
&:hover {
background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
}
}
.marker {
position:absolute;
top:22px;
left:121px;
padding:20px 27px 15px;
background:none;
z-index:2;
color:red;
+ .mymap {
background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
}
}
If you would use sprites instead of separate images, then you would also have all of the map images loaded with the first one already.