On hover, the scale transform starts to overlap the other pictures in it's row. I'm not sure how to prevent this and just have the scale stay within it's own picture.
HTML
<div id="pictures">
<img src="/pic1.jpg"/>
<img src="/pic2.jpg"/>
<img src="/pic3.jpeg"/>
</div>
CSS
#pictures {
text-align: justify;
overflow: hidden;
}
#pictures img {
display: inline-block;
width: 350px;
height: 350px;
}
#pictures:after {
content: '';
display: inline-block;
width: 100%;
}
#pictures img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .9s ease-in-out;
transition: .9s ease-in-out;
}
#pictures img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
Related
What is the simplest CSS for animating two elements to overlay each other when their parent is hovered on?
Here are two attempts I have done, each with separate issues.
https://codepen.io/ndullea/pen/RwNaXdJ
In this one they will both move, but it is not smooth because they have different parents and the elements are also misaligned because of that.
HTML:
<div class="container">
<div class="bar"/>
</div>
<div class="container_two">
<div class="bar_two"/>
</div>
CSS:
.container {
height: 100vh;
width: 100vw;
}
.bar {
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar_two {
height: 150px;
background-color: #eb4034;
width: 10px;
margin-left: 200px;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}
https://codepen.io/ndullea/pen/wvBWwML
This one is smooth, but they both animate they same way (instead of going towards each other), I think because of the margin property.
HTML:
<div class="container">
<div class="bar"/>
<div class="bar_two"/>
</div>
CSS:
.container {
height: 100vh;
width: 100vw;
}
.bar {
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar_two {
height: 150px;
background-color: #eb4034;
width: 10px;
margin-left: 200px;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}
I have edited your second fiddle with some improvements: https://jsfiddle.net/v1m0rsfj/11/
HTML
<div class="container">
<div class="bar"></div>
<div class="bar_two"></div>
</div>
CSS
.container {
height: 100vh;
width: 100vw;
border: 2px solid #000;
}
.bar,
.bar_two {
position: absolute;
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar {
}
.bar_two {
left: 200px;
background-color: #eb4034;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}
I found the biggest issue to be how you were closing your div tags <div /> isn't the right way to close a div tag please use <div></div>
Also I found margin-left to be mis-positioning your element hence the changes to your css
I have this piece of code where it's zooming in the image on cursor hover. However, I do also wish to add a transparent color overlay in RGB or Hex, how can I add this to the following code?
.hover-zoom-in .fl-photo-content {
overflow: hidden;
}
.hover-zoom-in .fl-photo-content .fl-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
will-change: transform;
}
.hover-zoom-in .fl-photo-content .fl-photo-img:hover {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
Thank you in advance!
I think you are looking for something like this:
.outer {
display: inline-block;
}
.outer .image {
position: relative;
display: inline-block;
transform: scale(1);
transition: transform 0.5s ease 0s;
}
.outer .image img {
width: 500px;
}
.outer .image::before {
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .6);
content: '';
}
.outer .image:hover {
transition: transform 0.5s ease 0s;
transform: scale(1.1);
}
.outer .image:hover::before {
display: block;
}
<div class="outer">
<div class="image">
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="">
</div>
</div>
I have the following html and CSS to have a box with an image where the title is centered. When hovering, the title is animated up and faded out while the text is faded in and animated from the bottom to the center.
This works well on PC but on touch devices, I have the problem that the user has to touch the image while scrolling to view the text. Touching the image once will immediately open the link.
Is there a way I can make it so that on mobile devices, the animation is executed when the user touches the image for the first time and the link is opened when touching for the second time? Touching outside the image should revert the animation.
I hope you can explain how I could achieve that (if it is possible). Or is there another, generally accepted way to deal with hover on mobile devices?
.content {
position: relative;
overflow: hidden;
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
.text_container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text_container div {
top: 50%;
transform: translateY(-50%);
}
.image_container {
width: 100%;
height: 100%;
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.content:hover .image {
transform: scale(1.1);
}
.text_container {
position: absolute;
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
}
.text_container>div {
position: absolute;
text-align: center;
width: 100%;
}
.text_container .title h2 {
opacity: 1;
margin: 0px;
padding: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.content:hover .text_container .title h2 {
opacity: 0;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.text_container .content div {
margin: 0px;
padding: 0px;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.content:hover .text_container .content div {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
<div class="content">
<a href="www.google.com">
<div class="container">
<div class="image_container">
<img src="https://www.google.com/logos/2017/fischinger/bg_cta.jpg" />
</div>
<div class="text_container">
<div class="title">
<h2>My Title</h2>
</div>
<div class="content">
<div>
Some text.
</div>
</div>
</div>
</div>
</a>
</div>
How can I make the image inside of this div scale without the actual div scaling on hover? So I only want the image to get zoomed on.
Here is the code:
<div id="container">
<img id="image" src="some-image">
</div>
Use transform: scale
#container {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
<div id="container">
<img id="image" src="https://via.placeholder.com/150">
</div>
a little bit elegant solution with transition effects
#container {
display: inline-block;
overflow: hidden;
}
#container img {
display: block;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div id="container">
<img id="image" src="https://via.placeholder.com/200">
</div>
I have a tricky problem which I have been unable to solve.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100% -ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
https://jsfiddle.net/6t04y9wo/6/
As you can see, the top-left navigation button is shown differently between Chrome and IE.
I tried to get everything work in percent units to avoid incompatibility with 4k monitors (or very different resolutions) or zooming (which is really hard to avoid on a touchscreen-monitor+ windows).
As far as I can see, the height of the buttonelement is measured really differently, and so the inner heights will be. I've tried many different settings for that, but I can't get it work and look good for both Chrome and Internet Explorer.
It seems that the margin here:
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
Is not correct, but I don't know how to fix it.
Maybe there is someone with some useful hints?
This would appear to be due to IE not calculating the height of the button correctly.
When using position: fixed; the position and dimensions of the element should be calculated in relation to the initial containing block:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
Fixed positioning (https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning)
It appears that IE is sizing the button in relation to the body. As you are using percentage height and no height has been specified on body this will result in the height for the button being set as auto. This can be overcome by adding height: 100%; to body so that the button's height can be calculated in relation to it.
The height of the bars in the button is set to 50% which with the padding will mean they exceed the height of the button. To overcome this you should set overflow: visible; on the button to allow them to be visible.
There is also a small typo that you will want to fix:
height: 100% -ms-content-zooming: none;
Should be:
height: 100%;
-ms-content-zooming: none;
You may also want to set a min-height and min-width to ensure the button shows when the viewport height is very small.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
height: 100%;
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Alternatively, you could use viewport units to specify the dimensions of the button.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 4vh;
height: 4vh;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Just use pixels, 4k displays are scaled, my uhd notebook shows exactly the same page when I'm looking at a page with a 1200px width body.