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.
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
I am having issues with my code for my CSS carousel. I have Javascript just switching some of the classes so I know that is not an issue. My issue is that the height of the image is not scaling the way I would like it to. I want this site to be responsive and the first step is making this fullscreen carousel working. I am making a one pager so I would like to be able to scroll down past the carousel, but when the page initially loads I would like it to show the fullscreen carousel and the NAV bar. The NAV bar is fine right now but the carousel is having issues with the height scaling. As the browser window gets smaller the image will become smaller than the screen, thus it is not fullscreen anymore. I don't mind if some of the image is cut off but I would like the carousel to always be full screen unless the user scrolls down or clicks on a link to an anchor point.
Here is the CSS:
/* General */
*{
box-sizing:border-box;
}
html {
margin:0;
padding:0;
width:100vw;
/* min-height:100vh;
*/
}
body {
width:100%;
max-width:100%;
min-height:100vh;
margin:0;
padding:60px 0 0 0;
background-color:#333333;
font-family: 'Varela Round', sans-serif;
}
/* ***Menu CSS*** */
/* -------------------------------------------
Nav bar
------------------------------------------- */
nav {
background-color:rgba(22,22,22,0.7);
position:fixed;
top:0;
left:0;
right:0;
height: 60px;
text-align:center;
z-index:2;
}
nav:after {
content:"";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style:solid;
border-width:0 60px 60px 0;
border-color:transparent #50C0C0 transparent transparent;
}
nav a {
text-decoration:none;
color:initial;
}
nav .navButton {
display:inline-block;
color:#50C0C0;
line-height:60px;
padding:0 50px;
position: relative;
}
nav .navButton:after {
content:"";
transition:width .5s, left .5s;
-webkit-transition:width .5s, left .5s;
-moz-transition:width .5s, left .5s;
-o-transition:width .5s, left .5s;
width:0;
left:50%;
}
nav .navButton:hover:after {
content:"";
left:20%;
height:1.5px;
width:60%;
background-color:#50C0C0;
position:absolute;
bottom:0;
box-shadow: 0 -3px 15px #ffffff;
}
/* div around all nav buttons */
nav .buttonWrapper {
display:inline-block;
text-align:center;
}
/* ***Carousel css*** */
/* -------------------------------------------
Carousel
------------------------------------------- */
.carousel {
width:100%;
position:relative;
height: 100%;
}
.carousel .imageContainer {
position:absolute;
transition:width .5s;
-webkit-transition:width .5s;
-moz-transition:width .5s;
-o-transition:width .5s;
overflow:hidden;
width:100%;
}
.carousel .imageContainer img {
width: 100vw;
min-width:100%;
min-height:100%;
}
.carousel .imageContainer.closed {
width:0;
}
.carousel .imageContainer.open {
width:100%;
}
.carousel .imageContainer.fromRight {
right:0;
}
.carousel .imageContainer.fromLeft {
left:0;
}
in order to keep your carousel full screen you need to set the width = 100% ( of course ), and have the height at 100vh, this will maintain the height of the carousel 100% height of the viewport. Should do the trick.
#carousel{
position:relavite;
display:block;
width:100%;
margin-top:70px;
height:calc(100vh - 70px);
background:#000 url('http://lorempixel.com/1100/1100/sports/') no-repeat top center;
background-size:cover;
z-index:1;
}
*you may consider to set the images on of your carousel as background images and set the size to cover. On my example, i subtracted the height of the nav, so the carousel can be rest of the height and pushed it down with margin.
you can preview here:
https://plnkr.co/edit/4AsQ3PoM0Ze2gOFENsVG?p=preview
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 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;
}
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.