I have an issue on chrome or safari browser rendering on Mac. The layout is like this:
<a href="pdf/bus.pdf" class="circle_wrapper">
<span class="business"></span>
<span class="title">BUSINESS SOLUTIONS</span>
<span class="small_title">SEE OUR BROCHURE </span>
<div class="circle_filler"></div>
<img src="images/image_logo.png" alt="">
</a>
and the CSS
.circle_wrapper {margin-right: 40px; float: left; width: 286px; height: 286px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background-color: transparent; position: relative; top:0; left:0; overflow:hidden; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-decoration: none;}
.circle_wrapper.last {margin-right:0px;}
.circle_wrapper img {position:absolute; z-index:-2; border:0;}
.circle_filler {width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; left:-380px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;}
.title {color: #ffffff;position: absolute; left:40px; top: 150px;width: 120px; font: 400 22px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center;}
.small_title {color: #ffffff;position: absolute; left:80px; top: 220px;width: 120px; font: 400 15px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center; opacity:0;}
.circle_wrapper:hover .small_title {opacity: 1;}
.circle_wrapper:hover .circle_filler{width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;left: -150px;}
.circle_wrapper:hover .title {left: 80px;}
you can view it live here -> www.advicity.ro
If you hover over the circles, the blue background doesn't stay hidden. Given that it's such a specific bug, my search is kind of limited and all the answers I found didn't fix it.
Any ideas ? (if you have something that works, an explanation would help for future reference)
Thanks!
Safari is broken when it comes to border-radius trimming :-s
Your fast solution would be to add to
.circle_wrapper{border:60px solid #FFF; margin:-30px;}
Also, change the border-radius from pixels to percentage, If you want circle, the best way to do it is to make border-radius:50%;
And then make the main_wrapper from 950 to 980px; :) And you're done :)
The other more complicated solution is to use masks: More here: https://www.webkit.org/blog/181/css-masks/
Related
I am not very experienced with coding as I've just started not too long ago, and am currently working on a Tumblr theme for here; http://heavenlyblue-theme.tumblr.com/ and I would like to make it so hovering over the posts will reveal the permalink and blur the entry only ( I want the permalink to be the focus ).
I'm not really sure how to go about doing such a thing, as applying the filter to the entry on hover makes it apply to the permalink.
I'm using Chrome atm.
#content .entry {
background-color: {color:COLOR06};
width: 500px;
margin: 0px 20px 20px;
display:inline-block;
padding: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
}
.entry:hover {
-webkit-filter: blur(1px);
}
.perma {
position: absolute;
width: 460px;
background-color: #fff;
height: auto;
padding: 20px;
top: 50%;
transform: translate(0, -50%);
opacity:0;
}
.entry:hover .perma {
opacity:1;
}
The HTML looks like this.
<div class="entry">
<div class="perma">
<center>▶ <a href="{Permalink}">
{NoteCountWithLabel}</a>
▶ {TimeAgo}
▶ via ✚ source
<font size="3">↻</font>
</center>
<div class="tags">{block:Tags}
✚ {Tag}
{/block:Tags}
</div>
</div>
I've searched around and I see some similar questions, but I don't really understand the solutions or, rather, how to apply them to my code here. Any help is appreciated! Thank you!
here is my JsFiddle: JsFiddle
i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!
Html:
<!doctype html>
<title>Untitled Document</title>
<body>
<div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>
<div id="mainwrapper">
<div id="box-3" class="box">
<img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>
<span class="caption fade-caption">
<h3>Click To Subscribe</h3>
<center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
</center>
</span>
</div>
</div>
</body>
CSS:
charset "utf-8";
/* CSS Document */
body {
background-image: url(http://i.imgur.com/2MVANTR.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
img, .banner {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
width: 370px;
height: 470px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
width: 370px;
height: 470px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 370px;
height: 470px;
text-align: left;
padding: 15px;
}
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...
#box-3{
position:relative;
top:500px;(set this to what you want it)
}
http://jsfiddle.net/J35sf/5/
You could just position it to where ever you want it. :)
Trying to have a css3 ease transition work on border radius of an image in Safari.
It just kinda blinks into the hover state instead of smooth transition.
Any help is much appreciated. My code is below:
CSS:
.all a:hover img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
-webkit-filter: grayscale(0%);
}
.all a img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.all a img {
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.all a img {
-webkit-filter: grayscale(100%);
transition: border-radius .3s ease;
-moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
-webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;
}
HTML:
<ul class="thumbs">
<li class="all identity">
<img src="https://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/>
</li>
</ul>
Link to the site:
https://imjoeybrennan.com
The following applied to the parent element with the border radius applied to kick webkit back into line for me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Another option is to wrap the element in two border radius parents.
Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.
This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.
.all a:hover img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px
border-radius: 100px;
}
You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.
I am trying to get a transition working on some bullets in firefox, but I am having no luck. It works on chrome, safari, opera and ie. Here is my css. I just want the background-image adjusted to my y positioning.
#slideshow-nav a {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 17px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav a:hover {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav li.activeSlide a {
display: block;
background: url('images/bullets.png');
background-position-y: 0px;
width: 10px;
height: 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
To my knowledge (which most certainly is incomplete) background-position-y is not a valid property. My guess is Firefox is not recognizing it. Try:
background-position: 0 17px;
going to
background-position: 0 0;
a.menuhvr { background-image:url('images/bullets.png'); background-repeat:no-repeat; background-position:left; padding-right: 0px; padding-left: 20px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; text-transform: none; border: 0px; display: block; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; height: 25px; line-height: 25px; }
a.menuhvr:hover { background-image: url(images/bullet1.png); background-repeat:no-repeat; background-color: #104595; background-position: right; margin: 0px; padding-right: 0px; padding-left: 25px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; background-color: #104595; border: 0px; display: block; height: 25px; line-height: 25px; }
If you wish you can change both different bullet images or can use single
Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.