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
Related
For adding blur effect on image, I create another element from the same image with absolute position, low opacity and blur effect. I don't think this is efficient. What's the best approach for this situation?
<img src="./images/shopping.svg" />
<img style="position: absolute;opacity: 0.5;filter: blur(10px);" src="./images/shopping.svg" />
Preview
You can use drop-shadow filter, to achieve the desired effect. This also kills the need of using second img tag.
body{
background: #222;
}
img{
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)) invert(100%);
/* Note - I used invert(100%) to invert the colors since the original svg was black.
If you want to remove it, you need to use rgba(255, 255, 255, 0.5) for white
shadow.
*/
}
<img src="https://www.svgrepo.com/show/80543/shopping-cart-outline.svg" width="300" />
blur hover effect using like this may be it's helping us:
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Blur */
.hover07 figure img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover07 figure:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
<div class="hover07 column">
<div>
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
<span>Hover</span>
</div>
<div>
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
<span>Hover</span>
</div>
</div>
Sample of hover effect
I want the hover effect to be animated starting from 0 center out to full size over 0.3s. The effect is what I want ,but the animation isn't working.The page I'm going to build will consist of eight different images (two columns four in each) I want this hover effect to work as you hove hover each image.
#tabbox{
height: 300px;
position: relative;
//border: 2px solid #888;
}
#tabbox img{
cursor: pointer;
display: block;
width: 240px;
height: 240px;
}
.tab {
float: left;
}
.tabcontent{
position: absolute;
padding:10px;
top:0;
width: 0px;
height: 0px;
background:rgba(0, 0, 0, .5);
border:1px solid #fff;
margin:10px;
color:#fff;
display:none;
overflow:hidden;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.tabcontent:before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.tab:hover > .tabcontent{
display: block;
width: 200px;
height: 200px;
}
.tab:hover:before, .tab:active:before{
-webkit-transform: scale(1);
transform: scale(1);
}
<div id="tabbox">
<div class="tab">
<img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" />
<div class="tabcontent">
<p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p>
</div><!--tabcontent-->
</div><!--tab-->
</div><!--tabbox-->
Just remove the display: none; from .tabcontent as this property can't be animated, only number properties can be animated.
Fiddle:
https://jsfiddle.net/uxouomoy/
Your fiddle and your question code is not the same.
But taking the code from the fiddle you should put the transition only in .tabcontent style. Use top and left properties to animate from the center position to the left corner position.
See the fiddle
Here's the css it is using:
#tabbox {
height: 300px;
position: relative;
//border: 2px solid #888;
}
#tabbox img {
cursor: pointer;
display: block;
width: 240px;
height: 240px;
}
.tab {
float: left;
}
.tabcontent {
position: absolute;
padding: 10px;
width: 0px;
height: 0px;
background: rgba(0, 0, 0, .5);
border: 1px solid #fff;
margin: 10px;
color: #fff;
display: block;
overflow: hidden;
top: 100px;
left: 100px;
visibility: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition: width top left;
}
.tab:hover > .tabcontent {
visibility: visible;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
}
<div id="tabbox">
<div class="tab">
<img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" />
<div class="tabcontent">
<p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p>
</div>
<!--tabcontent-->
</div>
<!--tab-->
</div>
<!--tabbox-->
I have div elements that are 200px tall and 200px wide, and I am filling each div element with an image of a person.
Upon hovering on the image, I want the image to be blurred, but I simultaneously want text to appear on the image (unblurred) that gives a description of who they are. Does anyone know how to do this?
So far, this is what I am getting:
Here is the CSS code:
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
}
.mem1 p {
text-align: center;
position: absolute;
margin: 70px 30px;
visibility: hidden;
}
.mem1:hover {
-webkit-filter: blur(2px);
}
.mem1:hover p {
text-align: center;
position: absolute;
margin: 70px 30px;
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
It sounds like the text is a child of the element that you are blurring. You can't do that. You need to do something like this:
<div class="container">
<div class="blurredPhoto"></div>
<div class="text">Your Text</div>
</div>
.container {
width: 200px;
height: 200px;
position: relative;
}
.blurredPhoto {
position: absolute;
width: 200px;
height: 200px;
}
.text {
position: absolute;
width: 200px;
height: 200px;
}
Then apply your blurring logic only to the .blurredPhoto object.
Here is a code snippet that does what you are looking for - blurring an image when you mouse over it, while simultaneously showing a textual description.
The key is that you need to use the :hover pseudoclass on the div, then when the div is hovered, you blur the image only, and show the description text span.
.blur {
width: 350px;
height: 350px;
}
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur:hover img {
-webkit-filter: blur(5px);
}
.blur span {
opacity: 0;
position: absolute;
top: 30px;
left: 30px;
}
.blur:hover span {
opacity: 1;
}
<div class="blur pic">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
<span>This is a photo of something.</span>
</div>
As #DA explained you need to get a parent container involved. Here's a working fiddle using your example code: https://jsfiddle.net/m25gkqkL/1/
<div class="parent">
<div class="mem1"></div>
<p>Hello World!</p>
</div>
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
z-index: 1;/* added */
position: relative;/* added */
}
.parent {/* added this */
position: relative;
height: 200px;
width: 262px;
}
.parent p {/* modified */
text-align: center;
position: absolute;
visibility: hidden;
top: 50%;/* modified */
margin-top: -0.5em;/* added */
width: 262px;/* added */
z-index: 2;/* added */
}
.parent:hover .mem1 {/* modified */
-webkit-filter: blur(2px);
}
.parent:hover p {/* modified */
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
.parent{
position: relative;
}
.text-child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
.text-child h1{
color: black;
text-decoration: none;
font-size: 40px;
}
.parent:hover img{
filter: blur(4px);
}
.parent:hover .text-child{
opacity: 1;
}
<div class="parent">
<div class="text-child">
<h1> hi this is text.<h1>
</div>
<img src="/images/excel.png" alt="">
</div>
I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto, my pseudo elements :before and :after will disappear due to the overflow property.
See: http://jsfiddle.net/accelerate/24xwru1n/
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
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.