.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
my desired effect is only working in Firefox and i assume IE. I am starting with a transparent image with a div wrapper around it with a blue background. When the user hovers over the image, i want it to zoom in and restore the opacity to 100% without breaking the set width and height of the div wrapper. This works perfectly in Firefox, but when i run the animation in Chrome the image exceeds the width of the blue div wrapper behind it. Here is my code and any help would be appreciated & JS Fiddle http://jsfiddle.net/yaLupdzo/1/:
<!doctype html>
<html>
<head>
<style>
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
This is a known issue as filed here: https://code.google.com/p/chromium/issues/detail?id=157218
In Webkit, with hardware acceleration, animated layers get promoted to a different rendering surface during animation, and then demoted once the animation is complete.
Turns out there is a simple solution. Have the container element 'promoted' to the same rendering layer as the hardware accelerated child by adding a lightweight animation to it:
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background: #2373bd;
display: block;
overflow: hidden;
-webkit-transform:scale(1.0);
}
.tricky_image {
width: 200px;
height: 200px;
-webkit-transition: all .6s ease;
opacity: 0.7;
}
.tricky:hover {
-webkit-transform:scale(1.0);
}
.tricky:hover .tricky_image {
opacity: 1;
-webkit-transform:scale(1.2);
}
See: http://jsfiddle.net/yaLupdzo/3/
Note that I've also added a simple animation to the parent container's default state, so that the same issue doesn't happen when hovering out.
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
You can repeat your code like that for browser compatibility..
Related
I trying to change the brightess of a div (not only an image brightness). Generaly there is an image in a div, description and caption, the main div background color is white. I want to show ovarlay div onmouse hover. Idea is to cover main div with overlay div. But now I getting only the image brightness change , what I want to achieve is to cover the hole div and keep whithe fonts.
When I add a thumbnail brightness effect it also influence the fonts to became darker. how to do that keeping fonts white.
col-sm-6, caption, thumbnail classes are defined by bootstrap.
The code of:
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
</div>
The css code:
.thumbnail:hover {
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.5);
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
color: #fff;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img{
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /> </feComponentTransfer></filter></svg>#filter');
filter: brightness(0.3);
-webkit-filter: brightness(0.3);
}
I believe You are trying to achieve a mask
You can use z-index property and postion:absolute for that overlay div
css rule
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
Snippet below
.thumbnail:hover {
transition: all 0.5s ease - in -out;
- moz - transition: all 0.5s ease - in -out;
- webkit - transition: all 0.5s ease - in -out;
- o - transition: all 0.5s ease - in -out;
- ms - transition: all 0.5s ease - in -out;
box - shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.5);
}
.hovereffect {
width: 100 %;
height: 100 %;
float: left;
overflow: hidden;
position: relative;
text - align: center;
cursor: default;
}
.hovereffect.overlay {
position: absolute;
overflow: hidden;
width: 80 %;
height: 80 %;
left: 10 %;
top: 10 %;
border - bottom: 1px solid# FFF;
border - top: 1px solid# FFF;
- webkit - transition: opacity 0.35s, -webkit - transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
- webkit - transform: scale(0, 1);
- ms - transform: scale(0, 1);
transform: scale(0, 1);
color: #fff;
}
.hovereffect:hover.overlay {
opacity: 1;
filter: alpha(opacity=100);
- webkit - transform: scale(1);
- ms - transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
- webkit - transition: all 0.35s;
transition: all 0.35s;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
I'm trying to find a solution for a slight issue that I'm having with some CSS.
The goal is to switch from a square solid colored box, with centered text, to a circular image.
While what I have currently works, albeit clunkily I'm sure, the fact that both the colored div and the image end up the same size, means that there is a faint colored line surrounding the image. Is there a way to remedy this?
I thought I could scale the colored div at the same time, but it ends up scaling both.
<head>
<style>
.images-container{
position: relative;
width: 175px;
height: 175px;
margin-top: -191px;
}
.images-container > img{
display: block;
width: 175px;
height: 175px;
position: absolute;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.images-container > img:nth-child(1){
filter: alpha(opacity=100);
opacity: 1;
z-index: 0;
}
.images-container > img:nth-child(2){
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
.images-container:hover > img:nth-child(1){
filter: alpha(opacity=0);
opacity: 0;
z-index: 0;
border-radius:50%
}
.images-container:hover > img:nth-child(2){
filter: alpha(opacity=100);
opacity: 1;
z-index: 3;
border-radius:50%;
}
.textbg{
background: #007049;
position: relative;
width: 175px;
height: 175px;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
.textbg:hover {
border-radius:50%;
}
.imgtransition{
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
margin-top:-191;
}
.textalign {
color:#fff;
line-height: 175px;
text-align:center;
}
</style>
<title></title>
</head>
<body>
<div class="textbg">
<p class="textalign">Family</p>
<div class="images-container"><img class="imgtransition" src=
"https://upload.wikimedia.org/wikipedia/commons/2/20/16x16.png">
<img class="imgtransition" src=
"http://image1.masterfile.com/em_t/06/50/52/623-06505245er.jpg"></div>
</div>
</body>
</html>
example in jsfiddle
Hi there add background transparent on your textbg hover
example:
.textbg:hover {
border-radius:50%;
background:transparent;
}
Hope it works.
I'm currently working on this site, I've added an animation to this, however the animation seems to skip when hovering in and out. It seems very random, sometimes it will skip to the end of the animation, other times it will skip to the start.
/*** GRID ***/
* {
box-sizing: border-box;
}
.row:after, .row:before {
content: "";
display: block;
overflow: hidden;
}
.row:after {
clear: both;
}
.row>* {
float: left;
}
.col-1-2 {
width: 50%;
}
/*** CODE ***/
.post {
position: relative;
overflow: hidden;
}
.post img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.panel {
display: flex;
align-items: center;
position: absolute;
z-index: 10;
padding: 0 80px;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: rgba(0,200,200,0.5);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.post:hover .panel {
opacity: 0;
}
.post:hover img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="row">
<div class="col-1-2">
<div class="post">
<div class="panel">
<div class="content">
<span>Text</span>
<h1>More Text</h1>
</div>
</div>
<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97550&w=800&h=550" />
</div>
</div>
<div class="col-1-2">
</div>
</div>
I've made a codepen to replicate it.
Hover over the image until the animation has fully stopped.
Hover out and back in again.
Does it cut to the end rather than transition?
Any help is much appreciated (it's driving me insane)
It seems to be a bug with Chrome using opacity. I've swapped to using rgba values instead.
I have this piece of code:
<style>
.zoomimg img{
margin-top:2px;
margin-bottom:2px;
margin-right: 70px;
margin-left: 4px;
height:180px;
width:520px;
-moz-transition:-moz-transform 0.3s ease-in;
-webkit-transition:-webkit-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
}
.zoomimg img:hover{
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
}
</style>
now what it does is great. but... when it enlarges , it enlarges the most right column and the picture in it.
resulting, the website gets wider...
but i don't want that.
how can i code it so the hover enlarge moves to the left. respectively and it doesn't enlarge the current browser page?
#container {
border: 2px solid red;
}
.zoomimg img {
margin-top: 2px;
margin-bottom: 2px;
margin-right: 70px;
margin-left: 4px;
height: 180px;
width: 520px;
overflow: hidden;
border: 2px solid black;
-moz-transition: -moz-transform 0.3s ease-in;
-webkit-transition: -webkit-transform 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.zoomimg img:hover {
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
<div id="container">
<div class="zoomimg">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>
</div>
I'm currently attempting to have a with an image fade in when I hover over some text using CSS. I've applied the CSS code, but the effect doesn't show; the div appears, but without the fade-in.
Also, I realize that CSS transitions don't really work with IE. If anyone could point me in the right direction of a workaround for that, it would be much appreciated. (:
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: relative;
display: none;
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
left: -1000px;
border: 1px solid gray;
background-color: #fff;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: relative;
display: inline;
top: -290px;
left: -25px;
opacity:1.0;
filter:alpha(opacity=100);/*position where
enlarged image should offset horizontally */
-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;
}
#networking {
width: 200px;
height: 140px;
margin-left: 360px;
top: 115px;
position: absolute;
background-color: #613286;
opacity:1.0;
filter:alpha(opacity=100);
color: #ffffff;
text-align:center;
border-radius: 20px;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-ms-transform: rotate(14deg);
-o-transform: rotate(14deg);
transform: rotate(14deg);
}
HTML:
<div id="networking">
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>
<span><img src="images/net3.jpg" width="250" /></span></a>
</div>
Thank you!
Try with removing your display rule:
.thumbnail span{ /*CSS for enlarged image*/
position: relative;
/*display: none; remove this */
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}
As you have opacity 0 you won't need display:none and you can't make a transition between not displayed at all to inlined as they are different types.
And modify this rule:
.thumbnail:hover span { /*CSS for enlarged image on hover*/
top: 0px; /* adjust as needed */
left: -25px;
opacity:1.0;
filter:alpha(opacity=100);/*position where
enlarged image should offset horizontally */
-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;
}
(the hover and then span can make it a bit jumpy).
I also added a ms prefixed version to transitions. It is apparently not useful in this context.
For IE9 and below you can use jQuery to fade in an element (or simply use vanilla JavaScript to modify the opacity in a setTimeout loop).
Fiddle here:
http://jsfiddle.net/AbdiasSoftware/9rCQv/
Is this what you're after?