I try to using transform:translate method for hover effect in #media only screen rule, but it doesn't work.
Without #media rule, hove method is OK with mouseower.
Any suggestions?
/* Here is css code */
.cs-hover a.info {
-webkit-transform: translate(0px, 350px);
-moz-transform: translate(0px, 350px);
-o-transform: translate(0px, 350px);
-ms-transform: translate(0px, 350px);`
transform: translate(0px, 350px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.cs-hover:hover a.info {
-webkit-transform: translate(60px,25px);
-moz-transform: translate(60px,25px);
-o-transform: translate(60px,25px);
-ms-transform: translate(60px,25px);
transform: translate(60px,25px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;}
}
Related
Please may you help me. How do you target lots of imgs and use the same css for all instead of having to do them individually as I have done. Essentially what is the correct syntax to have the .jpg files in order. Thank you for your help and time!
<style>
/*Image hover*/
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]{
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]:hover{
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]{
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]:hover{
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]{
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]:hover{
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]{
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover{
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
}
</style>
Grim suggestion:
<style>
/*Image hover*/
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"], {
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover {
-webkit-transform:scale(1) !important;
-moz-transform:scale(1) !important;
-ms-transform:scale(1) !important;
-o-transform:scale(1) !important;
transform:scale(1) !important;
}
</style>
Not sure what Im missing
Assiming you can't just add a class to the images, you can use commas.
So something like:
.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"] {
-webit-transition: -webkit-transform .7s ease !important;
-moz-transition: -moz-transform .7s ease !important;
-ms-transition: -ms-transform .7s ease !important;
-o-transition: -o-transform .7s ease !important;
transition: transform .7s ease !important;
-webkit-transform: scale(.9) !important;
-moz-transform: scale(.9) !important;
-ms-transform: scale(.9) !important;
-o-transform: scale(.9) !important;
transform: scale(.9) !important;
}
Or, better still, look into using something like SCSS to create your CSS files for you.
For displaying the team members of a platform. I want to show and hide the social media icons when you hover over the image of the team member. I'm using the CSS properties transition and scale to accomplish this.
Here you can see my code: https://jsfiddle.net/johna/L9hbtqce .
(I also use Bootstrap as CSS Framework and Font Awesome for the icons.)
HTML
<div class="team-member text-center">
<div class="picture">
<img src="http://s22.postimg.org/hxl9mdjqp/member.png" class="img-responsive" alt="Ward"/>
<div class="mask">
<div class="team-member-icons">
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
</div>
CSS
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.team-member .picture:hover .mask {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}
Everything works fine on Chrome or Firefox but on Internet Explorer (IE11) the image flickers when you "unhover" the circle with the social media icons.
Fixed my problem on Internet Explorer: https://jsfiddle.net/L9hbtqce/15/. I added an opacity of 1 to the image and an opacity of 0 when you hover over the image.
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.team-member .picture:hover .mask {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
width: 100%;
height: 100%;
-ms-transition: 1s;
transition: 1s;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}
I am trying to get figcaption caption to appear fade in/animate on hover on the bottom. But i cannot get the figcaption div tag seems to disappear off the screen.
I want it so that when you hover over the banner, the figcaption appears regardless over where the mouse is hovering over.
i have 4 elements:
- the background image
- gradient overlay
- description
- figcaption
the current code i have is: http://jsfiddle.net/fGF8E/
DEMO
.figcaption {
z-index: 4;
position: absolute;
height: 50px;
width: 100%;
bottom: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.landing-cover:hover .figcaption{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
HTML
<div class="photos">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>
CSS
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;}
why is the above CSS rotate property applied only to p1.jpg ?
Because you're only hovering on p1.jpg the CSS selector will only be fired on the image you are hovering.
If you just wan't each image to rotate seperatly, add these lines to your css.
-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;
Unfortunately, what you're asking for will require some JavaScript to make happen.
Rotate works. Angle of 360 degrees brings the image in the same position. Use transform with transition or change the angle value.
So, your code will be something like:
.photos img {
-webkit-transition: -webkit-transform 1.2s linear;
-moz-transition: -moz-transform 1.2s linear;
-o-transition: -o-transform 1.2s linear;
-ms-transition: -ms-transform 1.2s linear;
transition: transform 1.2s linear;
overflow:hidden;
}
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
-ms-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;
}
this link can help you..
.elem{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
There was no issue with your code. The rotate was working on all the elements of the div. The only reason you could not see it was because you did not have a delay or duration for the 'transformation'.
I have used the same code that 'Dragos Sandu' has used. Only change I suggest is the "ease-in-out" for the duration. specially when the change is only 1.2 seconds. This make the change "easy on the eye".
CSS
.photos img:hover {
transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
z-index: 10;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
}
Working Demo
I am testing with CSS and got to a strange behaviour where transform:rotate doesn't work, here is an example where the animation doesn't happen: jsFiddle
CSS
.close {
width:100px;
height:100px;
background:#00f;
color:#fff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.close:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.close, .close:hover {
-webkit-transition:rotate .2s ease-in-out;
-moz-transition:rotate .2s ease-in-out;
-o-transition:rotate .2s ease-in-out;
-ms-transition:rotate .2s ease-in-out;
transition:rotate .2s ease-in-out;
}
Why is this not working?
Thanks ;)
You applied the transition to the wrong attribute: (Working jsFiddle)
.close { /* You don't really need .close:hover here */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
The attribute you want to animate is transform. rotate() is a transformation function not a CSS property.