I'm using revolution slider and I'm stuck with a problem. As an example I use the original demo from here: https://revolution.themepunch.com/wordpress-photography-slider.
On the tab 'portfolio' you see images that shrink in size with a transition and look a bit darker when you hover over them. This is what I want as well but I can't figure out how.
In revolution slider you can add classes, ID's and CSS to specific images so what I probably need is a CSS code that makes this possible. I've tried several codes I found online but none of them do the trick because they all come with an html part as well.
My guess was: the image is already there, I don't need the html part, only assign classes or id's to the images and then give each image the same kind of CSS code.
Am I on the right track with this? And can anyone help me with the code for it?
Many thanks in advance!
add a class, then do some css
for example:
<img class="slider-img">
.slider-img:hover {
{
let me know if you need help with the css.
EDIT:
try this.
wrap each of your images around 2 divs, slider-img and img-wrap:
<div class="slider-img">
<div class="img-wrap">
<img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
</div>
</div>
then do some css:
.slider-img {
width: 200px;
cursor: pointer;
}
.slider-img img {
width: 100%;
}
.slider-img:hover .img-wrap {
background-color: black;
transform: scale(0.7);
-o-transform: scale(0.7);
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.slider-img:hover .img-wrap img{
opacity: 0.5;
}
basically what the css is doing is that when you hover over the main div (.slider-img), the div containing the image (.img-wrap) gets scaled down by 70% by the css -webkit-transform: scale(0.7);
it also gets a background color of black with an opacity of 80%. this gives the darkened image effect.
-webkit-transition: all .5s ease-in-out; gives a smooth transition effect.
if you are wondering why there are 5 different lines of css for the same thing, thats because each line targets specific browsers. -o- is opera, -moz- is firefox etc.
also, make sure to change the .slider-img width to match your needs.
check out the working example on js fiddle:
here
Related
I have a problem in this website:
http://www.bacubacu.com/paybus/
if you hover any of those 3 big round buttons at the bottom the animations works just great (they are absolute).
if you hover where it says "ver historial" the animation jumps to te beginning and stops, even if the "tap" class is still active. I've found out that it is related to the element positioning (being non-absolute).
I have no idea why this is happening, any of you can help me to solve it?
this is the CSS code:
.touch{
transition: transform 0.15s ease-out;
-webkit-transition: -webkit-transform 0.15s ease-out;
}
.touch.tap{
-webkit-transform: scale3D(0.9,0.9,0.9);
}
Ok, I found the answer myself. it gets fixed when adding "display:inline-block" to the anchor element. I didn't know where the problem was, sorry if my question was not too specific (my english doesn't help either hehe).
https://jsfiddle.net/15ryknk5/10/
display:inline-block;
I think you mean click instead of hovering. To hover is to place the cursor over the element. That is a different event than clicking. Also I think your css is wrong. I don't know if you can pass transform as a parameter of a transition. FInally I saw you Jquery and it seems to run on click. Try this code
HTML
<div id="tap_buttom" class="touch">
<p>This is a button</p>
</div>
CSS
.touch{
border-radius: 10px;
background: #ececec;
padding: 10px;
width: 150px;
text-align: center;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
/* Line added by Alvaro Prieto */
display: inline-block
}
.touch.tap
{
-webkit-transform: scale3D(0.9,0.9,0.9);
-moz-transform: scale3D(0.9,0.9,0.9);
-o-transform: scale3D(0.9,0.9,0.9);
-ms-transform: scale3D(0.9,0.9,0.9);
transform: scale3D(0.9,0.9,0.9);
}
jQuery
$(document).ready(function(){
$(this).mousedown(function(){
$("#tap_buttom").addClass("tap")
})// end click function
$(this).mouseup(function(){
$("#tap_buttom").removeClass("tap")
})// end click function
})// end document.ready
You can run this code here https://fiddle.jshell.net/15ryknk5/. I hope this works
I've been working on a very simple effect: a slow zoom effect on hovering on a image, using CSS3 transition. It renders nice and smothly on every broswer I had the chance to test it (Mozzila, Chrome, Safari), but it is shaky when I use IE 11.
Here's the code:
html
<div class="container">
<img />
</div>
css
.container {
width:310px;
height:220px;
overflow:hidden;
}
img {
width:100%;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.zoom {
-webkit-transform: scale(1.06);
-moz-transform: scale(1.06);
-o-transform: scale(1.06);
transform: scale(1.06);
}
js
$(document).ready(function(){
$('.container').hover(function() {
$('img',this).addClass('zoom');
}, function() {
$('img',this).removeClass('zoom');
});
});
You can find the demo here:
https://jsfiddle.net/malambart/Leydw2tp/1/
If someone had a idea of how to fix this, I'll be glad to try it. However I'll be happy just to remove the animation for any version of IE. Sorry to ask something that may be obvious to many people but what is the best way to acheive that? I just learned about a library called Modernizr but as I understand it only tell me if a feature is available, not allow me to "turn off" features on some browsers. Am I wrong?
Many thanks!
Change your transforms:
scale(1.06);
Into:
rotate(0.1deg)scale(1.06)
I was initially using jQuery's slide functions to slide a page out of view (to reveal another page beneath it) in a Cordova app I'm making, and whilst this worked perfect on my desktop browser, it (now understandably) was quite choppy on the actual mobile device. So I found out the reason for this and learnt that I should use CSS3 animations/transitions for mobile devices, and more specifically Translate3d for anything that may require GPU rendering. So I've made those changes like this:
#mainpage{
z-index: 10;
top: 0;
-webkit-transition: all .5s linear;
transition: all .5s linear;
border-bottom: 1px solid #111111;
}
#mainpage.out{
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
and I just toggle the 'out' class as necessary.
The transition runs smoothly until about 50px are left on the screen (or the page has about 50px left to reappear), then it stops for about a second before finishing up. I was wondering if anyone has any suggestion as to why this may be the case or if there's maybe an even more efficient way of doing this.
The device I am using has a nVIDIA Tegra 3 CPU with 12-Core High Performance Graphics.
I think this is not the way you should do the animation.
Try the following:
#mainpage {
z-index: 10;
top: 0;
border-bottom: 1px solid #111111;
-webkit-transition: -webkit-transform .5s linear;
transition: transform .5s linear;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainpage.out {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
First change is, specify the type of the property you want to animate (the transition parameter), not sure what you are animating when you write all.
Second thing, specify the "back" transition with translate3d(0,0,0). Also not sure, if it makes a difference here, though. I hope this helps you.
This one really has me confused. It's probably something simple that I've missed, but I sure can't find it...
I've created a fiddle to show you what I'm talking about.
You see originally this had 4 sections, these scrolled through fine with all of the links working correctly. The client has since added 1 more section, now for some reason when I add a further radio link, the whole control of the slide show goes to pot. See what I mean here.
All I've added is an extra link and content area. Does anyone know what I'm doing wrong? If you erase the below from the jsfiddle you'll see that it works correctly, but with the label for tab 5, it gives up. I'm at a loss... Any help greatly appreciated!
<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" /> <label for="tab-5" class="tab-label-5">POS</label>
<div class="content-5"> <h2>Fullfilment</h2> <p>Whatever your project involves Expressive Print are experienced in delivering it for you. From daily pick and pack requirements to contract packing and bulk despatches we have the ideal space to work in - clean, modern and secure premises with packing teams who are all fully CRB checked, robust stock control systems, comprehensive insurance cover and expertise. This ensures the right things are packed in the right order and sent the right people – simple but critical. Selecting a fulfilment partner who has strong systems with full accountability and customer service resource is vital to ensure your product’s success.</p> </div>
Demo your Jsfiddle
Now you just add one line css in your css file
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5 // add this line in your css file
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.3s 0.3s;
-moz-transition: all ease-out 0.3s 0.3s;
-o-transition: all ease-out 0.3s 0.3s;
-ms-transition: all ease-out 0.3s 0.3s;
transition: all ease-out 0.3s 0.3s;
}
Demo
I have a simple animation like this:
.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}
When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.
How do I fix this?
You have it a little bit wrong, you have to set the attributes a little differently:
.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }
You need to set the animation attributes on the element itself, and then the action on the hover :)
Working example (Webkit browsers only).