I'm new and I'm having a problem--this page is not responsive for 1366, and 1280 resolutions on PC, on 1920, and on mobile it's perfect. May you please help me with this one?
I tried adding contain on object-fit, but that didn't help me, I think the problem is with the width but I can't figure out how to solve this properly without ruining it on 1920 resolution and mobile phone.
Resolution 1366
.container1 {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.container1>div {
padding: 0px 5px;
max-width: 100%;
height: 325px;
}
.container1 div img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zgrade {
position: relative;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
max-width: 745px;
min-width: 428px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#media screen and (max-width: 780px) {
.container1 {
flex-direction: column;
}
.container1>div {
padding: 10px 5px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container1">
<div class="row justify-content-center">
<div class="zgrade">
<a href="zgradaA.html">
<img src="https://via.placeholder.com/800" /></a>
</div>
<br>
<div class="zgrade"><img src="https://via.placeholder.com/800" />
</div>
</div>
</div>
<div class="p-6"></div>
<div class="container1">
<div class="row justify-content-center ">
<div class="zgrade ">
<img src="https://via.placeholder.com/800" /></div>
<br>
<div class="zgrade"><img src="assets/img/szgrade/zgradaD.jpg" />
</div>
</div>
</div>
I removed Row code from the container and it's working. :) They are only used for containing columns. I don't have columns so I tried removing the row class and everything is cool right now. I hope that this will stay like this :)
Related
When I am applying hover on the card container it is not working or it is not flipping but I when I remove the hover it flips to the back side, I have tried everything that I know but still no progress on that.
`
import React from 'react'
import './Summary.css'
function Summary() {
return (
<div className='summary'>
<img className="body__image" src={require("./Images/background3Color.jpg")}></img>
<div className='box__container'>
<div className='boxes'>
<div className='box__inner'>
<div className='box__front'>
<img className='boxes__pics' src={require('./Images/AboutMe.jpg')}></img>
</div>
<div className='box__back'>
<div className='headline'></div>
<div className='education'>
<h2>Bachelor Of Technology in Computer Science and Tech.</h2>
</div>
<div className='work-ex'>
<p>Worked as an Application Dvelopment Associate in Accenture for 1 year</p>
</div>
</div>
</div>
</div>
<div className='boxes'>
<div className='box__inner'>
<div className='box__front'>
<img className='boxes__pics' src={require('./Images/Contacts.jpg')}></img>
</div>
<div className='box__back'>
<div className='headline'></div>
<div className='education'>
<h2>Bachelor Of Technology in Computer Science and Tech.</h2>
</div>
<div className='work-ex'>
<p>Worked as an Application Dvelopment Associate in Accenture for 1 year</p>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Summary
`
I was expecting the flip will work but to no avail.
I have tried to add hover to both box__inner and boxes container but still it would not flip.
Here is what I tried:
`
.summary{
position: relative;
height: 100vh;
z-index: -1;
}
.body__image{
height: 100vh;
}
.box__container{
position: absolute;
/* background-color: aqua; */
top: 0px;
width: 100%;
height: 100%;
/* opacity: 0.4; */
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.boxes{
height: 320px;
width: 300px;
margin: 0px 10px 0px 10px;
position: relative;
background-color: rgba(107,186,167,0.7);
perspective: 1000px;
overflow: hidden;
}
.box__inner{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s ease;
transform-style: preserve-3d;
}
.boxes__pics{
height: 100%;
width: 100%;
opacity: 0.7;
}
.box__inner:hover{
cursor: pointer;
transform: rotateY(180deg);
}
.box__front, .box__back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.box__front{
}
.box__back{
transform: rotateY(180deg);
}
`
The z-index was causing the main problem after removing it from the parent div the hover effect worked fine.
So I want these 3 div's to work side by side and the images to be responsive. when I try to set max-width or something it breaks up. Help me out on this one.
.fl {
display: flex;
flex-wrap: no-wrap;
height: 35%;
flex-direction: row;
}
.pic {
width: 34%;
}
.caro {
/* border: 2px solid black; */
height: 100%;
width: 100%;
display: block;
/* z-index: ; */
}
.caro img {
height: 100%;
width: 100%;
filter: brightness(0.5);
transition: all .3s;
}
.caro img:hover {
filter: brightness(1);
}
<div class="fl">
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
</div>
I would suggest two things:
Use calc to get a third with calc(100% / 3), instead of setting the width to a total of (3*34=) 102%.
Use object-fit: cover on the images to make them fit. I used different sizes on the images, so it's obvious that they are scaling.
Don't use all for transition, because that can cause janky animations due to the browser having to loop through all animatable properties. Always specify what you animate; it's easier to understand the code as well.
Using percentage for height doesn't automatically take the parent's height, so I had to improvise and use vh (viewport height).
body {
margin: 0px;
min-height: 100vh;
}
.fl {
display: flex;
flex-wrap: no-wrap;
height: 100vh;
max-height: 35vh;
}
.fl > .pic {
flex-basis: calc(100% / 3);
}
.caro img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5);
transition: filter .3s;
}
.caro img:hover {
filter: brightness(1);
}
<div class="fl">
<div class="pic">
<img src="https://picsum.photos/100/300">
</div>
<div class="pic">
<img src="https://picsum.photos/50/80.jpg" alt="">
</div>
<div class="pic">
<img src="https://picsum.photos/100/100" alt="">
</div>
</div>
I put some HTML/CSS together in order to customize a content block on Squarespace. 4 images floating inline. I want to hover on the image and for it to fade into another image, creating the illusion of zooming out. Everytime I try to implement the commands to do this, I break it. The new image isn't centered on the existing image and in some cases, finds a new position on the page. I want to keep the current structure intact.
Can someone please help me with adding the new code in order to achieve this?
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%">
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
<div class="desc">Shawn Evans</div>
</div>
</div>
UPDATE: this is now an answer to how to make one image fade into another on the given code.
I found that using the given card-changing code caused flickering on hover so I have changed it slightly so that existing main code remains as is except each img is wrapped in a div. This has as background-image the image that will be faded into. Some CSS is added to make the transition to/from opacity on hover
Here is the complete code, as given in the question with the additions listed above:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
/* ADDED CSS */
div.background {
width:100%;
height:auto;
background-position: 0px 8px;
background-repeat:no-repeat no-repeat;
background-size:contain;
margin: 0;
padding: 0;
}
img { opacity : 1; transition:opacity 0.3s; }
img:hover { opacity : 0;}
</style>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%;">
</div>
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
</div>
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
</div>
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
</div>
<div class="desc">Shawn Evans</div>
</div>
</div>
</body>
</html>
This is the original text in this answer post asking for clarification.
This wasn't claiming to be an answer but was asking for clarification of some code which cannot be done in a comment.
Here is the code Al Taljana put in a comment - with background-colors put in by me in lieu of actual images. Could you verify that this is the effect you want - basically just changing one image for another? (Run the snippet and hover over the rectangle).
.card { width: 130px; height: 195px; background: url("images/card-back.jpg") no-repeat; display: inline-block; background-color:magenta; }
.card:hover { background: url("images/card-front.jpg") no-repeat; background-color: cyan; }
<div class="card">
</div>
Now, I am not too sure about what are the exact images that you will like to use, but here is a template of how the code for it to work.
img {
transition: all linear 0.7s;
}
.box {
position: relative;
}
img.hover-img {
position: absolute;
opacity: 0;
}
.box:hover img.hover-img {
opacity: 1;
}
<div class="box">
<img class="hover-img" src="https://www.redbridgenet.com/wp-content/uploads/html5.png" alt="Image name"
width="300" height="300">
<img src="https://wwwtalks.com/wp-content/uploads/2017/11/logo-2582748_640-300x300.png" alt="Image name" width="300" height="300">
</div>
I have a mini-gallery of images which I want to use to toggle content depending on the image clicked. When hovering on the image it scales up slightly. My problem is that when scaling I want to hide the overflow off the page but still show the overflow in the y-direction. I have tried overflow-x: hidden, overflow-y: visible but the y-overflow only appears at the bottom and scrollbars appear.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 50%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
}
#images .image:hover {
transform: scale(1.1);
z-index: 10;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
</div>
Is there a way to make these act as it would with no overflow stated without a scrollbar appearing in the x direction?
You need to add scaling property to image instead of outer div.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 49%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
overflow: hidden;
position: relative;
border:1px solid #000;
}
#images .image:hover img {
transform: scale(1.1);
z-index: 10;
position: absolute;
left: 0;
transition: .2s;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
</div>
Remove overflow css from the images and add it to the body:
body {
width: 100%;
overflow: hidden;
}
I want to make the two images responsive with a fixed height similar to here.
I created the jsfiddle
Somehow the line break is added too soon. I tried to add width=auto however this did not work. Moreover it would be good if after a certain width it would become a single column.
It's not super clear what you're asking but there are a few ways to make images responsive with a fixed height and fluid width.
The easiest of which is to use the object-fit: cover rule. Try adding object-fit: cover to your .image element.
https://www.w3schools.com/css/css3_object-fit.asp
This should force it to fill its container without warping its dimensions.
If you want to build a 2-column grid, you need to set the width of the containers using calc, and remove the margin-right on all the even containers.
.container {
width: calc(50% - 10px);
margin-right: 20px;
float: left;
}
.container:nth-child(2n) {
margin-right: 0;
}
.image {
object-fit: cover;
height: 412px;
}
I modified your js fiddle here: https://jsfiddle.net/hnxz7co9/34/
Actually When You A image tell display block and height some value then you most declared
Width: auto
when you tell an image width some value then tell height auto.
when you break this option your image see stretch, you want one side fee height or width.
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.site-content {
position: relative;
}
.max-column {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.container {
width: 42%;
height: 412px;
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
margin-right: 20px;
line-height: 0px;
position: relative;
}
.image {
opacity: 1;
display: block;
height: 412px;
width: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
opacity: 1.0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class="site-content max-column">
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
</div>
==thanks==
The reason that your images don't go two to a line is that you haven't allowed enough room for them to do that. You have set your image width at 48%. If you add up all the horizontal margins and horizontal padding outside of your images, you'll find that they add up to more than four percent of the available width, so your second image gets bounced to the next line. I found in your jsfiddle that changing the image width to 47%, or changing your right margin to 10px, or changing your right margin to 1% allowed two images per row.
If you express a width as a percentage and your padding and margins as pixels, you have to calculate the total pixels involved and make sure that there's enough room for two images to fit on a line. To do this, you can use the calc() function as in Daniel Bernardi's answer, or if you want the margins to resize along with your image size, you can set them as percentages rather than hard pixel values.
As for changing to one image per row on smaller screens, I would start by reading about #media. This allows you to set up different CSS rules for screens of different sizes. So, if your screen is below a certain size, set the width of the image to 100% minus padding and margins.
you have to use background image instead of image
<div class="site-content max-column">
<div class="container">
<div class="image img1"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<div class="image img2"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<div class="image img3"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
</div>
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.site-content {
position: relative;
}
.max-column {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.container {
width: 48%;
height: 412px;
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
margin-right: 20px;
line-height: 0px;
position: relative;
}
.image {
opacity: 1;
display: block;
height: 412px;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
opacity: 1.0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img1{
background: url('https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg');
background-size: cover;
background-position: center;
}
.img2{
background: url('https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg');
}
.img3{
background: url('https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg');
background-size: cover;
background-position: center;
}
demo
Play around with the values and you will see how effects elements.
h1 {
padding: 80px;
text-align: center;
}
.image {
width: 450px;
height: 250px;
border: 1px black solid;
}
.grid_img {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 1fr));
/* you need SCSS for this:
#media (max-width: 990px) {
.grid_cards {
grid-template-columns: repeat(1, minmax(200px, 1fr));
}
*/
<div class="grid_img">
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
<div class="image">
<h1>Some Image here</h1>
</div>
</div>