I have replicated a gallery carousel in netflix style.
The problem is that images don't scale outside their parent element when I hover them.
<section id="section1">
//I have actually much more images here that overflow horizontally the screen.
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABVypZKpbeCTdH_RiIUNhK-H_kNm_qvlA_43XPwJXpvme9IwH3o2gnHlWx9sPgX8A8N_m9s5OVW_zHiEHVacerrBlzuAfoAl_9ppM9nbpVIiDbgv2tmeAaBV55-H8.jpg?r=c94" alt="">
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABaArrKSNeknqjF6J-wz8_dI_ATA6BpmxR7FGuNwY5NpWy3X6AMupA-63bXbqjIaoztw9tsYDb9X7iCJt6R_xOxNVdKnpGfWwJ_E7WXFJUm32FWIMScuA_3bNf5sV.jpg?r=993" alt="">
</section>
css:
#section1 {
width: 100%;
display: flex;
align-items: center;
position: relative;
overflow-x: hidden;
}
.wrapper section img{
width: 15.2vw;
margin: auto;
margin-left: 0.5rem;
border-radius: 1rem;
}
img:hover {
transform: scale(1.2);
overflow: visible;
position: relative;
z-index: 50;
}
Related
I'm trying to make my images stick to the navbar at the top. When I make the tab smaller, the pictures have a noticeable gap. I want to get rid of this gap before I start aligning the pictures vertically for phone usage.
I have managed to make it responsive horizontally, but the gap is bugging me a lot. I could just add a black background to hide it, but I feel like that takes away from it.
When I'm gonna make it more responsive, I'm going to use media queries, I wonder if that could solve the issue, but I don't think it would.
Any ideas on how this could be solved?
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbox {
position: absolute;
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}
.navbox img {
height: 10vh;
}
.home {
width: auto;
height: 75px;
}
.bildspel {
}
.arrowleft {
width: 60px;
height: 60px;
}
.arrowright {
width: 60px;
height: 60px;
}
.tre {
height: 90vh;
width: 99vw;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.tre img {
width: calc(100vw / 3);
aspect-ratio: 1/1.75;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.tre img:hover {
transform: scale(1.15)
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Witcher - Streaming on Netflix</title>
<link href="seessess.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="witcherlogo.png" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<img src="Crop2.png" onClick="location.href='index.html'">
<img src="Crop1.png" onClick="location.href='index.html'">
<img src="Crop3.png" onClick="location.href='index.html'">
</div>
</body>
</html>
The gap happens because your vh calculations don't add up. You can fix it by removing height: 90vh; from .tre so it will always stick to the nav bar.
It also helps to put your three images in a div, so you can use flex more easily. (the images are always 100% of their flex div container)
I added a media query to put the images under each other on a small screen.
*{
margin: 0;
padding: 0;
}
.navbox {
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbox img {
height: 10vh;
}
.tre {
display: flex;
align-items: center;
justify-content: space-between;
}
.tre div {
overflow:hidden;
}
.tre img {
transition: 0.3s ease-in-out;
cursor: pointer;
width:100%;
}
.tre img:hover {
transform: scale(1.15)
}
#media (max-width:300px) {
.tre {
flex-direction:column;
}
}
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="https://cataas.com/cat" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
</div>
I have this example where I wanted to demonstrate my problem: https://codepen.io/Kapaak/pen/oNBbgad
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
right: 4rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
I am trying to make some page, where will be some interactive images, that will be positioned somewhere on the page, just like the cats in the codepen. The problem is that when you resize window, they will always retain the same position.
What I want is to give them lets say max-width:900 and when I have smaller width they wont move, they will just overflow the page and I want the headline to be centered, thats why I gave the images position:absolute
The reason your right image is moving when you resize the browser is because you made it absolute compared to the right edge with right: 4rem;. If you change that value to say left: 104rem; then it will always be positioned 104 rem from the left edge of the window, regardless of the window width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
left: 104rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
Your best bet would be to either use Bootstrap columns (https://getbootstrap.com/), as these dynamically resize images/text in columns. Or you can use the following css to keep the same position.
#image {
width:100%;
height:100%;
margin-left:50%;
margin-right:50%;
position:absolute;
}
If you need to resize images when the page size is decreased you can use media queries in CSS. These can also be used to change the properties of any element for any screen size.
if you want your title always be centered use
text-align: center;
on your h2 element
Background
I am trying to make a div where an image is on one end with a text portion on the other (taking up the rest of the available space). The image is sized relative to the window width and the text is center-aligned within the space available.
Also, the image has icons that are absolutely positioned on it, relative to it's size.
You can test it for yourself here
HTML:
<div id="previousVideo" onclick="backVideo();" title="Back">
<div class="videoNameContainer">
<p class="videoName"></p>
</div>
<div class="videoImageContainer">
<div class="videoImageWrapper">
<img class="videoImage" src="" />
<span class="fa fa-backward"></span>
<p class="videoTime"></p>
</div>
</div>
</div>
CSS:
#previousVideo,
#nextVideo {
display: flex;
padding: 5px;
width: 25%;
height: 40%;
cursor: pointer;
}
.videoNameContainer {
width: 100%;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.videoImageContainer {
height: 100%;
display: flex;
width: 40%;
align-items: center;
}
.videoImageWrapper {
width: 100%;
max-height: 100%;
display: flex;
position: relative;
}
.videoName {
margin: 0;
max-height: 100%;
overflow: hidden;
background-color: white;
}
.videoTime {
position: absolute;
bottom: 0;
right: 3px;
color: white;
margin: 0;
font-size: 0.8em;
}
#previousVideo .videoNameContainer {
margin-right: 5px;
}
#previousVideo .videoImageContainer {
margin-left: auto;
}
.fa-backward, .fa-forward {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Question
Upon resizing the window of Firefox, the image resizes and everything follows the CSS.
Yet, doing the same on Chrome, the image does not resize at all:
Why is this happening? Thanks ahead!
UPDATE:
On adding width:100% to the image, Chrome does not maintain the aspect ratio of the image:
you container is resizing, but the img is overflowing.
You need to add width:100% to your img, so it resizes to whatever width the container has.
.videoImage{
width:100%;
height:100%;
}
It seems in the absense of a width declaration for the image itself, Firefox is resizing the img to the container, while Chrome is just keeping the image actual width.
I have an overlay image that needs to be responsive vertically and horizontally to work on desktop and mobile.
Edit: By vertically responsive, I mean it needs to stay within the window and not overflow below the bottom of the screen.
There's a element on top of the image that needs to stay in the same place, and the image must retain its aspect ratio.
I'd rather do this with pure CSS, but could use JS for browser compatibility or a simpler solution.
http://codepen.io/brooksroche/pen/mEgJmd?editors=1100
<div class="container">
<div class="img-container">
<img src="http://placehold.it/300X200">
<div class="example"></div>
</div>
</div>
.container {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.img-container {
position: relative;
margin: 0 auto;
border: 1px solid red;
width: 300px;
max-width: 100%;
}
.img-container img {
display: block;
max-width: 100%;
max-height: 100%;
}
.example {
position: absolute;
border: 1px solid blue;
top: 40%;
left: 30%;
width: 38%;
height: 20%;
}
Try setting the width and height to auto:
.img-container img {
display: block;
width: auto;
height: auto;
}
Or I have set the width or height, then auto the other which has worked.
Check out CSS media queries.
The max-width and max-height CSS attributes should be able to solve your problem once you pick the appropriate breakpoints for the screen sizes you want to cover.
Check out this Stack Overflow post.
Update
I just updated codepen & also putted the code here too.
<div class="container">
<div class="img-container">
<img src="http://placehold.it/500X300">
<div class="example"></div>
</div>
</div>
.container {
border: 1px solid red;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.img-container {
position: relative;
overflow: hidden;
display: flex;
}
.img-container img {
display: block;
max-width: 100%;
margin: auto;
}
.example {
border: 1px solid blue;
height: 20%;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
Here is the working codepen
I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.
This question is very similar but is for when the image is a background image.
Position element over background image. But the BG img changes size with the window. CSS
<img src="images/img.jpg" >
Link that should be over the image in a certain location.
<div class="wrapper">
<img src="images/img.jpg">
Link that should be over the image in a certain location.
</div>
<style>
.wrapper {
position: relative;
}
a {
position: absolute;
top: 10%;
left: 10%;
}
</style>
Wrap the image etc in an shrink-wrapped div and base the positioning off that.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 5%;
height: 5%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 36%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
Codepen Demo
Do you mean something like this?
.image {
position: relative;
width: 100%; /* for IE 6 */
}
a {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
<div class="image">
<img src="http://kingofwallpapers.com/grey/grey-001.jpg"/>
Link that should be over the image in a certain location.
</div>