I'm trying to rotate an image in a div on hover while adding a border radius. It works perfectly until a transition is added.
Here is my css
.box{position:relative; height:300px; width:300px; display:block;overflow:hidden; }
img{position:relative;z-index:2; opacity:1;}
.box:hover img{border-radius:150px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transition:all .5s linear;transition:all .5s linear; }
Here is the HTML
<div class="box">
<img src="http://i.imgur.com/ZzgHX9M.jpg" alt="beach">
</div>
Here is a demo on CodePen.
I could probably accomplish this with a background image, but for the purpose of the final project that wouldn't work. Any help is greatly appreciated.
Thanks!
Note: There will eventually be a caption div inside the .box div
Can't find a solution. Is the rotate functionality really important? Please see this fiddle if it is ok without rotate functionality.
Fiddle
I just removed the translate:rotateY
Hope that this helps.
I have a solution that works in Chrome and Firefox- I specify the transition as "transform" instead of using "all". please let me know if this is helpful?
Here is the CSS:
.box{
position:relative;
height:300px;
width:300px;
display:block;
overflow:hidden;
}
img{
position:relative;
z-index:2;
opacity:1;
}
.box:hover img{
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius:150px;
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
-webkit-transition: transform .5s linear;
transition: transform .5s linear;
}
Related
Code: https://jsfiddle.net/xakhLafd/
Hello,
I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix this by setting:
-webkit-transition-property: height,width;
But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.
Here's the code:
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
width: 100px;
height: 100px;
}
.thumbnail:hover {
position:relative;
top:-50px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.
However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."
A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.thumbnail:hover {
transform: scale(5);
}
Here is the fiddle I created that fixes the issue. I got rid of position relative and set the height to auto instead of 100px.
here is the code i did.
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg"
class="thumbnail"/>
.thumbnail{
width: 100px;
height: auto;
position:relative;
}
.thumbnail:hover {
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
Sorry forgot to update the fiddle here is the new link.
https://jsfiddle.net/xakhLafd/1/
If you want something simple, this is code I'm working on atm:
.box img {
margin: 1rem auto;
border: 2px solid white;
cursor: pointer;
transition: all .5s ease;
}
.box img:hover {
border-radius: 10px;
transform: scale(1.5);
}
I face such problem:
Mouseover on the right side, where the word heree is and you will get endless spinning (i use Firefox).
How to solve this?
button{
transition: 0.5s all;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
P.S. If I remove margin parameter, then it works ok. But i want margin too!
I believe this is because of all transition.
Set it only for the transform and I guess the issue is resolved here- in Firefox maybe the combination of scaling and margin on hover of the button is causing the issue.
button{
transition: 0.5s transform;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
Let me know your feedback on this.Thanks!
It looks like your button:hover + margin is getting transitioned by 0.5s as well as the transform. You just need to be a more specific with the transition : transition: 0.5s transform;
button{
transition: 0.5s transform;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
In the code below, there is an opacity transition which allows one image to fade out and reveal the one behind it. Overlaying both of these images is a logo image which is intended to remain in full view the full time of the transition, yet it does flicker out as the transition plays. (tested on chrome and firefox - seen on both)
How can i keep the logo constantly on top and in full opacity, while still having the underlying image fade work?
Please see the jsfiddle link at the bottom for a working example.
The HTML
<div>
<img id="bloomtop"
src="http://dev.kaizenauto.co/images/colorbloom.jpg">
<img id="bloombottom"
src="http://dev.kaizenauto.co/images/greybloom.jpg">
<img class="img-responsive z99"
src="http://dev.kaizenauto.co/images/drivenow.png">
</div>
The CSS
.z99 {
z-index:99;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
All this in action in a fiddle: http://jsfiddle.net/ax3dwbyo/2/
Thanks.
Simply add position: relative to your .z99 div, like this:
.z99 {
position: relative;
}
Here's a working demo:
.z99 {
z-index:99;
position:relative;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
<div>
<img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop">
<img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom">
<img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99">
</div>
jsFiddle.
I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text droping down from top, this effect only works on Chrome and IE. Does anyone encounter this before and can someone tell me why this is happening?
The code of my buttons are below:
#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}
#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}
.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}
#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}
#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
<div id="navigationi">
<a href="index.html" >
<div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
<div class="tab1h">
Home
</div>
</div>
</a>
</div>
So here is my html and css also here is a JSFiddle http://jsfiddle.net/MFcS5/.
Thanks,Victor
Removing overflow:hidden from #tab1:hover solves the problem. Here's a fiddle showing it working as intended in Firefox (as well as Chrome and IE).
It could be caused by this bug: "CSS transitions don't start due to frame reconstruction of ancestor or self..."; changing the overflow causes #tab1 to be redrawn at the same time as the transition is supposed to start, so its child .tab1h doesn't get to transition.
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}