I have an animation with an iframe which is reduced and let appear my .project container but it looks like my red background for this class is not computed when I use Firefox or Chrome.
Codepen: http://codepen.io/kejoff/pen/bqmQXQ
HTML
<body>
Click to resize
<div class="container">
<div class="project">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d338195.2873427642!2d2.2500731!3d48.530343949999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sfr!4v1490778528424" frameborder="0" style="border:0" allowfullscreen class="map"></iframe>
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
.button {
padding: 10px;
margin: 2rem auto;
width: 6%;
background-color: #FFC72C;
display: block;
text-decoration: none;
color: #071D49;
}
.button:hover {
background-color: #071D49;
color: #FFC72C;
}
.container {
width: 1400px;
height: 90vh;
margin: 0 auto;
background-color: blue;
}
.project {
background: red;
width: 100%;
height: 100vh;
}
.map {
width: 100%;
height: 90vh;
display: block;
transition: all 1s linear;
}
.mapAnimationIn {
animation: resize-gmap 5s;
animation-fill-mode: forwards;
display: block;
}
/* Keyframe resize Gmap */
#keyframes resize-gmap {
from {
height: 90vh;
width: 100%;
}
to {
height: 18vh;
width: 10vw;
transform: translate(0, 72vh);
}
}
your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so -
.container {
width: 1400px;
margin: 0 auto;
background-color: blue;
padding: 20px;
}
.project {
background: red;
width: 100%;
}
.map {
width: 90%;
}
Also its generally a bad idea to hard code height. To make your page responsive, prefer dynamic width i.e. in % for example rather than in pixels.
Hope it helps
Related
working on SCSS transition I made two classes trigger and box and while hovering on trigger box should start moving and rotating.
.trigger {
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 25% 25%;
&:hover {
.box {
transform: translate(200px, 150px) rotate(20deg);
}
}
}
.box {
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
the effect works fine on chrome
[1]: https://i.stack.imgur.com/E2CnC.png
however Firefox scales the trigger borders
[2]: https://i.stack.imgur.com/6OVW4.png
the jade code
.trigger
.box
I added position: relative to .trigger and position: absolute to the box. I didn't have your html so I took a guess at what it might look like. this solution seems to work at least in codepen (I viewed in Chrome and Firefox and both are working). I had to modify your scss to css in this example in order to tinker with it in codepen and post here.
.trigger {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 5% 25%;
}
.trigger:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
.box {
position: absolute;
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
<div class="trigger">
<div class="box"></div>
</div>
How can I zoom an image that is inside an div on hover using CSS (zoom only the image, not the div).
See what I'm talking about here
Some minor modifications of #tim-klein answer to get effect from video
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
transition: all 2s ease-in-out;
}
.container:hover img {
transform: scale(2,2)
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
You can accomplish the general idea by using the :hover pseudo-class. Note: I didn't go overboard with keeping the img centered or using a transition to mimic the slow zoom, however, you could easily add those features if desired.
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
}
.container:hover img {
width: 120%;
height: 120%;
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
Couple of different ways to tackle this.
Demo: https://codepen.io/shanomurphy/pen/BvMrWq?editors=1100
1. Using background-image
HTML:
<div class="zoom-bg"></div>
CSS:
.zoom-bg {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-bg:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url('https://placeimg.com/300/200/nature') no-repeat center;
background-size: cover;
transition: all .3s ease-in-out;
}
.zoom-bg:hover:before {
transform: scale(1.2);
}
2. Using nested image and object-fit
Basically the same as #Alx Lark's answer but adding object-fit to maintain the aspect ratio of the image.
HTML:
<div class="zoom-img">
<img src="https://placeimg.com/300/200/arch">
</div>
CSS:
.zoom-img {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-img > img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
.zoom-img:hover > img {
transform: scale(1.2);
}
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I'm using the transform:translateY();to hover text over two images.
The problem is that this method is not allowing me to position my text over specific parts of the images.
Ideally, I want to the freedom of being able to move the text more to the left, or to the right. At the moment I can only move the text up and down.
Alternatives method suggestions are always welcome.
Code is below and here is a codepen - (Hover the images with your screen full width as I haven't included media queries).
HTML
<div class="projects">
<div class="art-project1">
<img class="img-img" src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2014/12/16/08/138188934.png" width="600" height="400" />
<p class="project-description1">Get Involved</p>
</div>
<div class="art-project2">
<img class="img-img" src="http://i.huffpost.com/gadgets/slideshows/343100/slide_343100_3557153_free.jpg" width="600"height="500" />
<p class="project-description2">Be Apart</p>
</div>
</div>
CSS
body {
background-color:#f5f5dc;
}
* {
box-sizing: border-box;
}
p {
color: #3232CD;
font-weight:bold;
font-size: 2rem;
}
.projects {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
/* Images -------------------*/
.img-img {
padding-top: 80px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project1 {
display: inline-block;
vertical-align: middle;
margin-left: 20%;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project2 {
display: inline-block;
vertical-align: middle;
margin-left: -20%;
margin-right: auto;
margin-top:10%;
max-width: 100%;
height: auto;
}
.project-description1 {
position:absolute;
color: #3232CD;
visibility: hidden;
opacity: 0;
transform:translateY(-1000%);
}
.art-project1:hover .project-description1 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
.project-description2 {
position:absolute;
color: #3232CD;
visibility: hidden;
opacity: 0;
transform:translateY(-400%);
}
.art-project2:hover .project-description2 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
Try using translate() ;)
Hope this helps!
If you use position: absolute on an element, you first need to give its parent container position relative. Then you can simply use the top and left (or bottom and right parameters to position the absolute element, with percentage or pixel values - no need for transform: translateat all (unless you need exact centering).
body {
background-color:#f5f5dc;
}
* {
box-sizing: border-box;
}
p {
color: #3232CD;
font-weight:bold;
font-size: 2rem;
}
.projects {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
/* Images -------------------*/
.img-img {
padding-top: 80px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project1 {
position: relative;
display: inline-block;
vertical-align: middle;
left: 20%;
max-width: 100%;
height: auto;
}
.project-description1 {
position:absolute;
top: 15%;
left: 6%;
color: #3232CD;
visibility: hidden;
opacity: 0;
}
.art-project1:hover .project-description1 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
<div class="projects">
<div class="art-project1">
<img class="img-img" src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2014/12/16/08/138188934.png" width="600" height="400" />
<p class="project-description1">Get Involved</p>
</div>
I'm trying to make a div the same width as the containing image with height:100% and width:auto.
With display:inline-block it seems to work but only if you don't resize the browser. The div slide always keep the initial width. How can I change this behavior?
This is my code:
CSS:
html{
width: 100%;
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.gallery{
height: 80%;
width: 100%;
}
.slide{
background-color: #000;
height: 100%;
width: auto;
display: inline-block;
margin: 0;
padding: 0;
}
img{
width: auto;
height: 100%;
float: left;
opacity: 0.5;
}
HTML:
<body>
<div class="gallery">
<div class="slide">
<img src="http://lorempixel.com/300/200/nature/1">
</div>
</div>
</body>
or here:
https://jsfiddle.net/ykzokoxd/
Fix:
.element{
-webkit-animation: ibfix infinite 1s;
}
#-webkit-keyframes ibfix {
from {max-width:100%;padding:0;}
to {max-width:99.9%;padding:0.01%}
}
Edit: "Repainting/refreshing inline-block element, so width is adapting to child img"
https://jsfiddle.net/ykzokoxd/2/