I have a page involving 2 responsive images next to each other (they automatically change their size while maintaining aspect ratio, when browser is resized), which works great for desktop. However, I want them to automatically align on top of each other on mobile phones: One image should be at the top while the other moves below it.
How can I do this? Help is appreciated.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container {
position: relative;
width: 50%;
}
.image1 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.image2 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #A4CE8C;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text1 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.text2 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container col-sm-6" style="float:right; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img2re2.jpg" alt="Avatar" class="image1 img-responsive">
<div class="overlay" >
<div class="text1"><b>S Marble</b></div>
</div>
</div>
<div class="container col-sm-6" style="float:left; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img1re222.jpg" alt="Avatar" class="image2 img-responsive">
<div class="overlay">
<div class="text2"><b>S Steel</b></div>
</div>
</div>
</body>
</html>
You can use #media rule for detecting the screen size and the code the desired for mobile
Eg:
#media only screen and (max-width: 768px) {
.container {
display:flex;
flex-direction: column;
}
}
Related
I've found this great tutorial on youtube by CodingNepal (credits to them) where it is basically a a 3d card that flips whenever you hover on, made entirely by CSS and HTML. I want to implement it in a project that I am currently making where it is basically a gallery consisting of 4 rows and multiple column. The problem is I am having a hard time trying to duplicate it in order to achieve the "4 rows and multiple column". How do I do this?
this is the code of the page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="gallerystyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
The Clutch
</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Showroom</li>
<li><a class="active" href="Gallery.html">Gallery</a></li>
<li>About us</li>
<li>Feedback</li>
</ul>
</nav>
<div class="center">
<div class="front-face">
<div class="contents front">
<h2>
Image is here
</h2>
</div>
</div>
<div class="back-face">
<div class="contents back">
<h2>
Photo Info here
</h2>
</div>
</div>
</div>
</body>
</html>
And this is the code for the style sheet. Credits to CodingNepal on youtube for this amazing code
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
font-family: 'Montserrat', sans-serif;
background: linear-gradient(45deg,#111212 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
position: absolute;
}
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.left{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.right{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.front-face, .back-face{
height: 100%;
width: 100%;
text-align: center;
background: linear-gradient(rgba(0,0,0,.2),
rgba(0,0,0,.2)),url(bg.jpeg);
background-size: cover;
background-position: center;
transform: translateY(0deg);
border-radius: 10px;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
left: 0%;
top: 50%;
width: 100%;
perspective: 1000px;
transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
font-size: 35px;
margin-bottom: 15px;
color: white;
}
.front span{
font-size: 23px;
color: white;
}
.front p:after{
content: '';
display: block;
left: 0;
right: 0;
width: 100px;
height: 2px;
background: white;
margin: 0 auto;
margin-top: 10px;
}
.back-face{
transform: rotateY(180deg);
background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
color: white;
}
.back h2{
font-size: 33px;
padding-bottom: 5px;
}
.back span{
font-size: 25px;
}
.icons{
margin: 10px 0;
display: block;
}
i.fab{
color: #042f4b;
font-size: 20px;
height: 40px;
width: 40px;
background: white;
border-radius: 50%;
margin: 0 5px;
line-height: 40px;
cursor: pointer;
}
.center:hover > .back-face{
transform: rotateY(0deg);
}
.center:hover > .front-face{
transform: rotateY(-180deg);
}
img{
width: 250px;
height: 350px;
object-fit: cover;
}
The solutions I've tried already is implementing bootstrap but the problem is it destroys the layout of my navbar. I am not that efficient yet in using bootstrap and I am mainly doing the solution via the best of my knowledge about it. I am hoping you can help me with this problem, Thanks!
I am trying to make a 3d cube on top of a surface using CSS and HTML. There is a ball on the top of it. I tried to use transform: translateZ() method on the front , bottom , left and right div.
It did not work. Can someone tell how to fix this and why it didn't work?
This is the code:
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
perspective: 10px;
perspective-origin: 720px 80px
}
.scene {
position: relative;
transform-style: preserve-3d
}
.ball {
background: lightblue;
width: 1em;
height: 1em;
border-radius: 50%;
position: absolute;
top: -3em;
left: -1em;
}
.cube {
background: var(--boxColor);
height: 3em;
width: 3em;
position: absolute;
top: -2em;
left: -2em;
}
.floor {
width: 28em;
height: 0.2em;
background: repeating-linear-gradient(to top right, red, blue);
position: absolute;
top: 1em;
left: -15em;
transform: rotateX(90deg);
}
.left,
.right,
.front,
.bottom {
width: 100%;
height: 100%;
background: var(--boxColor);
position: absolute;
}
.front {
transform: translateZ(9em);
}
.left {
transform: rotateY(90deg) translateZ(3em);
}
This is the html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="scene">
<div class="floor"> </div>
//cube section
<div class="cube">
<div class='left'></div>
<div class='right'></div>
<div class="front"></div>
<div class='bottom'></div>
</div>
//cube section
<div class="ball"> </div>
</div>
</div>
</body>
</html>
I wasn't able to make your layout work with em for dimensions, so used pixels but you should be able to work this solution into your project. Not a ton of changes, just your use of perspective needed some adjustment, and your cube was only 4 sides.
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
perspective: 10px;
perspective-origin: 720px 80px
}
.scene {
position: relative;
transform-style: preserve-3d
}
.ball {
background: lightblue;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
bottom: 200px;
margin: 0 auto;
justify-content: center;
display: flex;
align-self: center;
}
.floor {
width: 28em;
height: 0.2em;
background: repeating-linear-gradient(to top right, red, blue);
position: absolute;
top: 150px;
left: -15em;
transform: rotateX(90deg);
}
.cube-container {
perspective: 200px;
perspective-origin: 50% 50%;
transform: rotateZ(30deg);
}
.cube {
height: 100px;
width: 100px;
transform-style: preserve-3d;
animation: rotate 12s ease-in-out infinite;
}
.cube>div {
position: absolute;
height: 100%;
width: 100%;
background: var(--boxColor);
}
.front,
.back,
.top,
.bottom,
.left,
.right {
border: 1px solid rgba(0, 0, 0, .3);
}
.front {
transform: translateZ(50px);
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(50px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-50px);
transform-origin: center left;
}
.top {
transform: rotateX(-270deg) translateY(-50px);
transform-origin: top center;
}
.bottom {
transform: rotateX(270deg) translateY(50px);
transform-origin: bottom center;
}
#keyframes rotate {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(0deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="scene">
<div class="floor"> </div>
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
<div class="ball"> </div>
</div>
</body>
</html>
Here is the effect I want:
It's my first time to create a website, so I am using the template from the website and modify the code.
The original code for figure is:
<div class="content">
<div class="media">
<img src="images/home/01.jpg" alt="" title="This right here is a caption." />
</div>
....
</div>
I've tried this, but it did not work:
<div class = "img_div">
<div class="media">
<img src="images/home/01.jpg">
<a href="images/fulls/01.jpg">
<div class="mask">
<h3>A Picture of food</h3>
</div>
</a>
<style>
.img_div {
margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 531px;
height: 354px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
}
</style>
</div>
</div>
Can anyone help me?
/* Your style.css file */
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,0,0,0.4);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://i.stack.imgur.com/XZ9UB.jpg" alt="" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
This is a nicer solution to your question. Source and adjusted to your image need: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
Since you are a beginner, welcome to the website developer world!
You you may find latest design solutions here https://www.w3schools.com.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,0,0,0.4);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="images/home/01.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
<div class = "img_div">
<div class="media">
<a href="#">
<h3>A Picture of food</h3>
<span class="mask"> </span>
<img src="images/home/01.jpg">
</a>
</div>
</div>
<style>
.media {
position: relative;
width: auto;
display: inline-block;
}
span.mask {
position: absolute;
top: 0;
bottom: 0;
background-color: #3a3a3a99;
right: 0;
left: 0;
opacity: 0;
}
.media:hover .mask {
opacity: 1;
}
h3{
position: absolute;
top:10%;
right: 0;
left: 0;
margin: auto;
opacity: 0;
text-align: center;
color: #fff;
}
.media:hover h3{
opacity: 1;
}
</style>
I have a "lightbox" type og image viewer that I'm using to navigate through some images.
The images have different aspect ratio, and I need to put the arrows on the edge. When I resize the websize the images follows the size of the webpage, which is very good
However, the arrows are just floating away from the image :( Any ideas?
body {
background-image: url("../img/bg-masthead.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
.modal {
position: fixed;
width: 100%;
height: 1000%;
background-color: rgba(0, 0, 0, 0.4);
/* display: none; */
}
.modal-content {
display: inline-block;
width: 95%;
height: 95%;
position: fixed;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
}
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.prev {
top: 50%;
left: 8px;
}
.close {
top: 4px;
right: 8px;
}
.next {
top: 50%;
right: 8px;
}
.arrow {
position: absolute;
color: white;
font-weight: bold;
font-size: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<title>Bilde galleri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div id="lightBox" class="modal">
<div class="modal-content" id="img_container">
<img id="largeImg" src="images/2007/Malayisa/IMG_0243.jpg">
<div class="prev arrow" onclick="plusSlides(-1)">❮</div>
<div class="next arrow" onclick="plusSlides(1)">❯</div>
<div class="close arrow" onclick="document.getElementById('lightBox').style.display='none'">×</div>
</div>
</div>
</body>
</html>
I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>
The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>