When the mouse is hovered over the image, I want the text to be centered horizontally. It seems to work fine in Chrome, FF, and IE, but not Safari on Windows. Can someone help me out?
Fiddle: http://jsfiddle.net/gavk9yjs/
HTML
<div id="content">
<article class="project">
<img width="375" height="375" src="http://i.imgur.com/Eyv3TNs.jpg" alt="thumb">
<div class="overlay">
<a class="post-link expand" href="http://google.com">+</a>
<h3>Red Palm Oil</h3></div>
</article>
</div>
CSS
.project {
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
width: 100%;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.project:hover .overlay {
opacity: 1;
}
.expand {
background: #000;
border: 5px solid #000;
bottom: 0;
color: #FFF;
display: block;
font-size: 30px;
font-size: 3rem;
height: 60px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 2;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
h3 {
color: #FFF;
font-size: 17px;
font-size: 1.7rem;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
left: 50%;
line-height: 1.3;
margin-top: 3.3em;
padding: 0 1em;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
JS
$('#content').on('mouseenter', 'article.project', function(){
// If loading icon doesn't exist in the DOM...
if ( !$('.overlay').find('.loading-icon').length) {
// And if the project wrapper is activated...
if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
$(this).addClass('hover');
} else {
$(this).addClass('hover grayscale grayscale-fade');
}
// If loading icon exists in the DOM...
} else {
$(this).find('.post-link').hide();
}
// Dirty fix for 1px white flicker on hover (Chrome)
var overlayWidth = $('article.project').outerWidth();
$('.overlay').css({
marginLeft: -1,
width: overlayWidth + 2
});
}).on('mouseleave', 'article.project', function(){
// If #project-wrapper is activated...
if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
$(this).removeClass('hover');
$(this).find('.post-link').show();
// If #project-wrapper is not activated...
} else {
// If loading icon is present...
if ( $(this).find('.loading-icon').length ) {
// Only remove the 'hover' class
$(this).removeClass('hover');
// If loading icon is not present...
} else {
// Remove all classes
$(this).removeClass('hover grayscale grayscale-fade');
$(this).find('.post-link').show();
}
}
});
// Adjust the project titles so they always fit the container nicely
function adjustTitle() {
var thumbWidth = $('article.project > img').outerWidth();
if (thumbWidth <= 220) {
$('.overlay > h3').addClass('mobile');
} else {
$('.overlay > h3').removeClass('mobile');
}
}
$(window).on('resize', adjustTitle);
Safari still needs a vendor prefix on some CSS3 properties, so you will need to add after
transform: translate(50%, 50%) :
-webkit-transform: translate(50%, 50%);
Also you solution seems a bit overcomplicated. You can achieve a centred text by removing the left: 50% and transform: translate(50%, 50%).
Hope this helps.
The (technical) solution to our problem has already been posted by someone, but I'd like to point something else:
Safari for Windows is way out of date. I urge you to use a different browser for Windows.
However, If you're only doing browser optimizations for different browsers, consider this: Safari for Windows is Version 5.1.7 at best. According to caniuse's browser usage table, Safari 5.1 has a global share of 0.37%. Compare this number to IE8 (2.9%) and IE9 (1.82%), both of which don't support transitions at all and IE8 even doesn't support transforms.
So if you're worried about shutting that tiny group of Safari for Windows users out, there is that unfortunately still not so tiny group of old-IE users that are much worse.
Related
I'm trying to get this affect to work on my material ui card component using react and makeStyles and I really dont know how to translate this affect to the cards, can someone help me tranlsate it to a simple css code so I can use it in MakeStyles? I think my problem is that i dont understand the code on the codepen, if some of you have a similiar codepen and can share it, i'd appreciate it, thanks.
https://codepen.io/chrisdothtml/pen/OVmgwK
/* Reset */
#import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
// variables
$anim-speed: 0.3s;
// main styles
.tiles {
width: 1040px;
font-size: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.tile {
display: inline-block;
margin: 10px;
text-align: left;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
&:before {
content: '';
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.7) 100%
);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: $anim-speed;
}
img {
display: block;
max-width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.details {
font-size: 16px;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: $anim-speed;
transition-delay: 0s;
}
.title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}
.info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
}
&:focus,
&:hover {
&:before,
span {
opacity: 1;
}
&:before {
top: 50%;
}
span {
top: 0;
}
.title {
transition-delay: 0.15s;
}
.info {
transition-delay: 0.25s;
}
}
}
}
The CSS codes you see on CodePen uses SCSS. Click on the CSS Editor dropdown icon -> View Compiled CSS.
Obviously as the name suggests, this will show you the compiled CSS. :)
I'm building a website currently and am experiencing issues with transform: scale. I've got a button, and when a user hovers over it, two things happen:
A background "sweeps" in diagonally
The button label colour changes
The button grows slightly
I have got this working, and it looks really nice, but after implementing point 3, I'm seeing a weird gap to the left hand side when the button grows.
Here is my code: click for demo
HTML
Hover
CSS
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
border: 3px solid green;
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 20px 35px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
transform: scale(1.1);
}
And here's a screenshot of the gap I'm seeing. This issue occurs in Chrome and Safari (I haven't tested Firefox or IE as I can't download them at work).
Screenshot of weird gap
It "only" appears in Chrome but not Firefox (edit: worse in Edge: first it's on the left then on bottom...). Not sure if a rounding error or something else is the cause of that gap, but I find that replacing border by a box-shadow improves the rendering.
There's still a gap that can be seen near the end of the transition but finally disappears so I added 2 box-shadows on :hover: the new one is inset and fills the gap between "border/box-shadow" and content box faster.
Codepen: http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 19px 34px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: transform ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
transform: scale(1.1);
}
Hover
EDIT: playing with the size of the transitioned :pseudo
.button:before {
content: ' ';
transition: all ease-out .25s;
width: calc(200% + 6px);
height: calc(100% + 6px);
position: absolute;
top: -3px;
left: -3px;
transform-origin: 0 3px;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
to take into account the border but that doesn't change anything because of overflow: hidden.
So here's my third try: by adding a container (or having the A element as a container) and keeping the border on the child element, it makes that gap disappear (overflow is around the border).
Codepen: http://codepen.io/PhilippeVay/pen/ZBbKWd
body {
text-align: center;
padding-top: 10%;
}
a {
display: inline-block;
overflow: hidden;
background: transparent;
transition: all ease .25s;
color: green;
position: relative;
z-index: 2;
font-family: sans-serif;
text-decoration: none;
}
a > span {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
border: 3px solid green;
padding: 20px 35px;
}
a:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
a:hover:before {
transform: translateX(0);
}
a:hover {
color: white;
transform: scale(1.1);
}
<span class="bd">Hover</span>
Fx transitions till the end flawlessly... and "corrects" the width by adding 2px on the right. But it's already visible in your jsbin so it's another story (and less annoying I guess as user will have clicked by then imho)
I am having a problem with firefox, using position relative on a div that has been given a display of table-cell, firefox is ignoring the position relative so my absolutely positioned elements inside the table cell are not showing correctly. You can see my example page at: http://dev.aaronpitts.ch/lhc/ it works fine in webkit etc so you can see what I am trying to achieve. Trying this did not help: http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/
My affected code is:
<div class="css-table">
<article id="crystallization">
<h2><i class="fa fa-arrow-circle-o-right icon-margin-r"></i> Crystallisation</h2>
<div class="service-hover">
<p>1) A comprehensive approach , from conceptualization & development through to realization</p>
<p>2) ^^ for global/hospitality projects</p>
<p>3) Our full range of services provide unique knowledge on the management of hospitality professionals, securing sustainable returns for your investments</p>
</div>
</article>
<div class="cell-space"></div>
<article id="consulting">
<h2><i class="fa fa-arrow-circle-o-right icon-margin-r"></i> Consulting</h2>
<div class="service-hover">
<p>1) Extensive industry experience and knowledge, combined with the ability to listen</p>
<p>2) Our integrative product offering provides you with innovative solutions that meet your specific needs</p>
</div>
</article>
</div>
And the css:
.css-table {
display: table;
width: 100%;
}
#management-consulting article {
background-size: cover;
background-position: center center;
position: relative;
}
#management-consulting article a {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2000;
}
#management-consulting article:hover h2 {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#management-consulting article h2 {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
position: absolute;
color: #FFF;
font-weight: 200;
text-transform: none;
}
#crystallization {
width: 60%;
display: table-cell;
background-image: url(../img/crystallization.jpg);
height: 400px;
}
#crystallization h2 {
bottom: 30px;
right: 30px;
}
.cell-space {
width: 2%;
display: table-cell;
}
#consulting {
width: 35%;
background-image: url(../img/consulting.jpg);
display: table-cell;
}
#consulting h2 {
top: 30px;
left: 30px;
}
.service-hover {
opacity: 0;
background: rgba(0, 0, 0, 0.7);
padding: 30px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-family: "ff-dagny-web-pro",sans-serif;
font-style: normal;
font-weight: 200;
font-size: 20px;
font-size: 1.25rem;
color: #FFF;
}
#management-consulting article:hover .service-hover {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Gecko doesn't support table-cells being absolute containing blocks at the moment. See https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Note that the relevant spec text here is at http://www.w3.org/TR/CSS21/visuren.html#choose-position and says:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I have an image and an overlay within an image wrapper. Hovering over the wrapper causes the overlay to go from transparency 0 to 0.8. It works in all browsers but IE. I believe I am using the proper IE filter for opacity. Please take a look at the code:
HTML
<div class="img-wrap">
<img class="profile" src="images/z.jpg">
</div>
CSS
.img-wrap {
margin-right: 3px;
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 250px;
}
.img-overlay {
text-decoration: none;
display: none;
height: 100%;
background-color: #000;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 100;
}
.img-overlay.team {
top: 0;
}
.img-wrap:hover .img-overlay {
display: block;
opacity: 0.80;
filter: alpha(opacity = 80);
transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
this filter should work for ie 7-8
I am using pure CSS based tooltip, but having display issue. The span box is hiding behind main boday and facebook like box which is in right sidebar. Below is the screenshot of the same.
Here is the tooltip CSS.
a.tooltip
{
position: relative;
display: inline-block;
}
a.tooltip span {
position: absolute;
width: 300px;
padding: 8px;
left: 50%;
font-size: 13px;
line-height: 16px;
margin-left: -160px;
text-align: justify;
visibility: hidden;
bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
opacity: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-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;
}
/** CSS Down Arrow **/
a.tooltip span:after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
a:hover.tooltip span {
opacity: 1;
visibility: visible;
bottom: 30px;
z-index: 100;
}
a.imgleft {
float: left;
margin: 0 15px 10px 0;
}
a.imgright {
float: right;
margin: 0 0 10px 15px;
}
a.imgleft span, a.imgright span {
bottom: 140px;
}
a:hover.imgleft span, a:hover.imgright span {
bottom: 130px;
}
/** Span Color **/
a.ttblue {
color: #E45742;
}
a.ttblue span {
background: #E45742;
border: 4px solid #E45742;
color: #FFF;
}
a.ttblue span:after {
border-top: 10px solid #E45742;
}
any help will be greatly appreciated! Thanks
I believe we had to see more of your pages html to be able to help you.
However, the only problem I can imagine is .tooltip being in a different stacking context than right sidebar's.
Does any of .tooltip's parents/grandparents have a z-index or an opacity level set on it? It might be an opacity level. If it is, set a positive z-index on it (or if sidebar has a z-index too, a higher one than sidebar's).