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;
}
Related
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
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;
}
I'm trying to position a div box off center and to the left. It must be absolute positioning and I can't wrap it within another div as it's generated by a very long js script.
Here's my css so far:
.nivo-html-caption {
position:absolute;
top:59px;
opacity:0.8;
transition:all 0.8s ease-out;
background-color: rgba(0,0,0,0.24);
width: 350px;
color: #cbcbcb;
padding: 10px;
margin:auto;
}
I'm using the margin:auto; to center it and the top:59px; to push it down from the top. But I now need to push it off center to the left about 300px.
I'm not quite sure how to do this without wrapping it in another div or putting another div inside it (which I really don't want to start doing as it's going to take a lot of messing around)
Your request is a little unclear but you first need to center the item and then move it over 50% of the required adjustment.
.nivo-html-caption {
position:absolute;
top:59px;
left:50%;
transform:translateX(-50%); /* centered first regardless of width*/
margin-left: -175px; /* then moved over */
.parent {
position: relative;
height: 500px;
border:1px solid green;
}
.nivo-html-caption {
position:absolute;
top:59px;
left:50%;
transform:translateX(-50%);
margin-left: -175px;
opacity:0.8;
transition:all 0.8s ease-out;
background-color: rgba(0, 0, 0, 0.24);
width: 350px;
color: #cbcbcb;
padding: 10px;
}
.center {
position: absolute;
top:0%;
left:50%;
height: 100%;
width: 1px;
background: red;
}
<div class="parent">
<div class="nivo-html-caption"></div>
<div class="center"></div>
</div>
As it's positioned absolute, instead of centering it using margin: auto, try this:
left: 50%;
margin-left: -175px;
This will centre it and adjusting the margin-left will take it off centre.
margin: 0 auto will not get you the right results if position is set to absolute, so try:
left: 50%;
position: absolute;
margin: auto;
top: 0px;
this will make the div stick to the left side. and vertically center
example fiddle here
try like this : Demo
h1 {
position:absolute;
top:59px;
opacity:0.8;
transition:all 0.8s ease-out;
background-color: rgba(0, 0, 0, 0.24);
width: 350px;
color: #cbcbcb;
padding: 10px;
margin:auto;
left: 50%;
margin-left: -25%;
}
HTML:
<h1> Text half center </h1>
I tried to align it in center using left and shifted half using margin-left
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 put an image and its description at the bottom of the image (and over the image with the opacity 0.8). Both the elements are inside a div element. But enable display the title.
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:relative;
bottom:0px;
z-index:2;
clear:both;
}
.tilebg {
position:relative;
top:0px;
height:100%;
z-index:0;
opacity:1;
}
I've made a fiddle with example
Here's how positioning works:
position:relative - this sets the current element as the origin point (0,0)
position:absolute - this sets the position of an element in respect to its origin. If the parent has position:relative, that becomes the origin. Otherwise, it goes up the HTML tree until it finds one, defaulting to BODY if none is defined.
So: parent = relative, child = absolute
.item {
opacity:1;
background-color:grey;
margin:20px;
margin-left:20px;
width:200px;
height:200px;
position:relative;
background-image:url(http://i.imgur.com/vdDQgb.jpg);
}
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:absolute;
bottom:0px;
z-index:2;
clear:both;
font-size:12px;
}
I would encourage you to use the new figure and figcaption elements since they were created for this very purpose:
<figure>
<img src="http://placekitten.com/300/200" />
<figcaption>This is the caption.</figcaption>
</figure>
​With the following CSS:
figure {
width: 300px; height: 200px;
position: relative; /* Permits placement figcaption absolutely */
}
figcaption {
position: absolute;
bottom: 0; left: 0; width: 100%;
background: rgba(0,0,0,.8); /* Semi-transparent background */
}
Demo: http://jsfiddle.net/qu4a3/1/