I've been trying to achieve this effect to my site, but it seems that the code isn't working.
Here's the sample site.
And here's the site I'm working on.
I'm mainly changing this part of the theme..
.main-content-area img.wp-post-image {
min-width: 100%;
height: auto;
}
.main-content .wp-post-image {
}
.main-content-area img {
max-width: 100%;
}
Changing the min-width and height would reflect the changes, I'm not sure how to do it when hovering the image. Any advice would help. Thanks!
Maybe try the CSS Transform Scale, paired with CSS Transition (which makes the css changes happen over a set interval of time). Not my Fiddle, but here it is:
http://jsfiddle.net/27Syr/1206/
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Feel free to ask me anything else if you have any questions about it.
Related
I have a mobile menu that slides to the left from off the screen to the right. It works very well using the below code. However, when it's off the screen, I can actually scroll my mobile view over to the right and see it off the screen rather than not be shown at all, and the mobile screen width staying put. How do I fix this issue?
.mobile-menu {
width:200px;
border:1px solid #eee;
background-color:#f2f2f2;
height:285px;
position:absolute;
top:35px;
right:-200px;
z-index:99999;
display:none;
-webkit-transition: right 0.1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: right 0.1s ease-out; /* Firefox 4-15 */
-o-transition: right 0.1s ease-out; /* Opera 10.50–12.00 */
transition: right 0.1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.mobile-on-screen {
right:0 !important;
display:block;
}
I can't see your full code, however, I would guess that what is probably missing is an overflow: hidden; on the parent div, or body.
For closed state of menu
body {
overflow-x: hidden;
}
And for open state of menu toggle a class on body
body.menu-open {
overflow: hidden
}
Demo: [http://everythinghomegrown.com/] (look at the Customize Your Own section with the four batman images)
For some reason, the background-size is not transitioning. Instead it jumps from one size to the other without a smooth transition.
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
Why is the transition not working? I’m experiencing this in Chrome, Safari, and Firefox.
Solved.
Originally I had this:
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
I fixed the problem by adding a second value to the background-size property.
div {
background-size: 100% 100%; /* added second 100% to fix the problem */
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
I'm having a problem with this css transition code. It expands to a new height on hover fine, but I need it to go back to it original height when out hover or mouseout. (Like a pencil ad) Currently, on mouseout it stays expanded and the cursor is stuck on the hyperlink. Current page link is http://hswheels.autoconx.com/
Any help would be great appreciated.
.grow {
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
.grow:hover {
height: 345px; /* This is the height on hover */
background:url('http://www.heraldstandard.com/app/media/wheels/expanded2.jpg')
}
.grow:hover a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
Because you have your anchor set to position:absolute, it's taking up the full page.
You simply need to set position:relative on the parent element (in this case .grow) so that the anchor is absolutely positioned to the parent, instead of the page.
.grow {
position:relative;
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
added a fiddle: http://jsfiddle.net/3nuhev2k/2/
Your problem seems to be the 100% height and 100% width on your link on hover. It is as big as your website.
in a part of my code I have CSS3 animation and it seems does not work very well on safari, but it's fine on other browsers, so, I would like to make and exception, and if the browser is safari then it ignores the animation part of the code.
Here is my code:
download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
transition: opacity .45s ease-in-out;
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out; /* EXCEPTION FOR HERE */
-o-transition: opacity .45s ease-in-out;
}
.download-music:hover {-webkit-opacity:1 !important; -o-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
Selector hacks
1.
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {}
html[xmlns*=""]:root .selector {}
2.
/* Safari 6- and Chrome 24- */
::made-up-pseudo-element, .selector {}
3.
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}
Media query hacks
/* Safari 3+, Chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hacks
1.
/* Safari 5- */
var isSafari = /a/.__proto__=='//';
2.
/* Safari */
var isSafari = /Constructor/.test(window.HTMLElement);
Source: http://browserhacks.com/
Ditch the prefixed opacity, it's been a couple of years since all browsers have supported it. It interferes with your transition declarations. This should work fine in all browsers.
.download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out;
-o-transition: opacity .45s ease-in-out;
transition: opacity .45s ease-in-out;
}
.download-music:hover {
opacity:1;
filter:alpha(opacity=100);
}
Two days ago I asked for help with animation css3.
Here is my animation: [link]http://jsfiddle.net/SD58Z/8/[/link]
Everything works fine, but I have another question. It is possible to set width of this line automatically, that this line fit properly regardless of the length of link text? The point is this line is too short when my title is longer.
I just created a mod and line shows correctly but my animation disappeared.
[link]http://jsfiddle.net/DashDesign/SD58Z/284/[/link]
I'm not exactly sure what you are trying to do, but this makes the underline span to 500px.
.line{
font-family:Tahoma;
width:0px;
position: absolute;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */
}
div:hover{
width:500px;
}
.line div{
background:#fff;
position:relative;
bottom:1px;
}
}
2 changes were the width on hover and your fiddle was missing a closing brace at the end