I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Related
As you can see in the image attached, the airplane image is moving to left intentionally. But I don't want its position to move out of the alignment. I want to have something like parallax effect but on hover like this website is doing. https://digitalsilk.com/. I have just started website development.
I want to know how I can have these image transition from https://digitalsilk.com/. But I am not able to recreate that transition. I am having trouble with one thing that is moving the back airplane image a little to the left without moving its position (like a parallel effect) You can see the main page gallery of the website attached in desktop view.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s
}
</style>
The trick is to set the width to the image wrapper and overflow:hidden.
I know the picture of plane is cut of a bit. You need to scale the picture and position it a little bit different. Or change the picture itself.
When I checked your code, I would recomand you also to wrap everything to some wrapper with fixed size. It doesnt look like you expected on full screen.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
width: 600px;
height: auto;
overflow: hidden;
transition: transform .6s ease-in-out, opacity .5s;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s;
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s;
}
</style>
Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.
You needed to add prefixes for transform: rotate() on both .package-down and .package-up.
Also this:
-webkit-transition: margin .1s ease, transform .25s ease-out;
Should be this:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
And it would be a similar adjustment for all the other prefixed transition properties.
See Codepen
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});
img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png">
</div>
</section>
</div><!--END PRIMARY CONTENT-->
I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.
Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into
.package-down:hover { /* properties to transition to */ }
Next, do not repeat styles that the element already has and that do not change.
Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:
transition: margin .1s ease, transform .25s ease-out;
This will make the margin changes take 0.1s, but the rotation to take 0.25s.
Please describe more concisely what your transition is to look/perform like.
http://codepen.io/anon/pen/aOJmKe
Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:
CSS: Animation vs. Transition
Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}
So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-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;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-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;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/
When I click the div, I'm trying to make the div turn into a green 30x30 circle over a course of 2 seconds. And then 3 seconds after the animation is done running, I want the red area go back to its original state.
With my code so far, I'm able to click the div and change it's size to 30x30 and shape to a circle
Here's my code so far:
#blue-box {
height: 100px;
width: 100px;
background: blue;
/* transition:background-color .5s ease-in; */
transition: background-color 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, background-color 2s ease 3s;
}
.box-change {
background-color: green;
border-radius: 100%;
-webkit-transform: scale(.3, .3);
-moz-transform: scale(.3, ,.3);
-o-transform: scale(.3, .3);
-ms-transform: scale(.3, .3);
transform: scale(.3, .3);
}
var box = $('#blue-box');
box.on('click', function(){
box.toggleClass('box-change');
if (box.hasClass('box-change'))
console.log("testing123");
else
console.log("testing testing!");
});
http://jsfiddle.net/gatordh7/gxes2ep3/
To the #blue-box div, I tried including: "transition:background-color .5s ease-in", and then setting the background-color to green on the .box-change class I toggled when the div was clicked, but I still can't figure this out.
What am I doing wrong?
Fixed in this one http://jsfiddle.net/gxes2ep3/3/
var box = $('.blue-box');
box.on('click', function(){
box.toggleClass('box-change');
if (box.hasClass('box-change'))
console.log("testing123");
else
console.log("testing testing!");
});
You were using id for the box, ids have a higher priority than classes. Also, the css background-color was not the same in blue box and in box-change rules. Ans you had a 3s delay for the color