I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
https://jsfiddle.net/b0gdpmjw/
image with caption
image with caption and pop up description
Position: Absolute; and flexbox structure, will do what you want.
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_positioning.asp
the solution is to specify the position from left for .text.
(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)
figcaption {
color: white;
font-style: oblique;
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.column1 {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
p {
color: black; /* changed to black, so you can see the text */
font: 25px Sulphur Point, sans-serif;
}
.text {
position: absolute;
bottom: 0;
/* right: 0;*/
left: 0; /* here */
width: 200px;
height: 0;
text-align: center;
transition: height 0.7s ease-out;
}
.column1:hover>.text {
height: 150px;
}
.column1 {
float: left;
width: 33.33%;
padding: 5px;
margin-bottom: 50px;
}
/* Clearfix (clear floats) */
.row1::after {
content: "";
clear: both;
display: table;
margin-bottom: 50px;
}
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.
Also the previous and next button arrows are not aligned in the center of the background circle aswell.
HTML
<div>
<h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>
<!-- Multi Carousel -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="owl-carousel">
<div class="item">
<img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Jackets & Coats</span>
</p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span>
</p>
</div>
<div class="item">
<img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Clothes</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Boys 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Girls 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Newborn 0-9<br>months</span></p>
</div>
<div class="item">
<img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Accessories</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Jackets & <br>Coats</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Shirts &<br> blouses</span></p>
</div>
<div class="item">
<img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg">
<p class="carosueltitletxt">
H&M Home<br>
<span class="carosueltxt">New Home &<br> Interior</span></p>
</div>
</div>
</div>
</div>
CSS
/*carousel*/
.prod-slider-container {
position: relative;
font-family: font-awesome;
margin-left: 10%;
margin-right: 10%;
}
.owl-buttons {
background-color: transparent;
border: 0px none transparent;
width: 9%;
}
.owl-prev,
.owl-next {
position: absolute;
top: 37px;
}
i.fa {
cursor: pointer;
font-size: 10px;
padding-top: 0;
height: 0;
width: 0px;
color: rgba(0, 0, 4, 0.5);
}
.owl-perv {
left: -2%;
}
.owl-next {
right: 5.1%;
}
.item img {
margin-left: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #222222;
object-fit: cover;
}
.carosueltitletxt{
font-family:helvetica;
text-align:center;
color:#555555;
font-size:11px;
font-weight:bold;
}
.carosueltxt{
font-family:helvetica;
text-align:center;
color:#222222;
}
.d4-container img {
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: 20px;
display: block;
width: 80%;
height: 400px;
object-fit: cover;
background: gray;
}
JQuery
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 8,
pagination:false,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
Hi can you please try with this and let me know thank you.
.prod-slider-container .item a {
display: block;
margin: 0 auto;
float: none;
text-align: center;
}
To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.
You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.
And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-
.inner-container {
position: relative;
}
.inner-container .owl-prev,
.inner-container .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {left: 15px}
.owl-next {right: 15px}
just use display: flex on .item class and change the value of justify-content and align items to fit your need.
like this:
.item{
display: flex;
justify-content: center;
align-items: space-around;
}
I have an image gallery that opens each image, below the image grid, as an enlargement with descriptive text. I can't seem to get the text to center and stay on the image. I have tried changing the CSS with overflow, width, etc., but I think it's in the JS code. I do not know JS, I found the code on a codepen and made changes as needed (and with some stack overflow help!). In addition, I would like the enlarged image to close and revert back to the gallery after a period of time. Is that possible?
The link to my codepen is https://codepen.io/Ovimel/pen/YgzVeg The first image shows the issue I am having.
I'm a coding novice, and I'm not sure that I posted the code here correctly. Actually, I know it's not correct as the images are not aligned and standard sizes and the enlargements don't load, but do I need to post everything? The codepen is where you'll see it actually work/not work. Thanks in advance for your help!
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 35px;
color: red;
font-size: 20px;
text-align: center;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</p>
</footer>
</div>
I'd personally start the whole thing again, but adding this to your CSS should help
#imgtext {
width: 70%;
display: block;
margin: auto;
position: relative;
bottom: 100px;
}
I just tested in the code pen and it requires the !important tag
#imgtext {
width: 70%!important;
display: block!important;
margin: auto!important;
position: relative!important;
bottom: 100px!important;
}
A small tweak of your css can give the desired result. Set a max-width (narrower than the full width) and a margin that will set it appropriately (in this case I gave it a max width of 75% and a margin left and right of 10% [an approximation, taking into account browser-added margins/padding], and set it to display:block with position:absolute, 20% from the top. Any of these values can be tweaked as you wish, but you get the picture. I would recommend using a smaller font size for benefit of smaller screens, by the by
Hope this helps
//Make older browsers aware of new HTML5 layout tags
'header nav aside article footer section'.replace(/\w+/g, function(n) {
document.createElement(n)
})
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
display: block;
max-width:75%;
position: absolute;
top:20%;
text-align:center;
margin:0 10%;
color: red;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<body>
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</footer>
</body>
I am using the minimal template in Shopify and would like to recreate this image attached. I have tried researching for similar examples but can't seem to find anything. How do I go about creating this image? How do I get an image behind a menu?
Any links or documents to achieving image would really help.
Try to break down the design to work out it's constituent parts. You want a background image and an overlay with product cards. You want to position the overlay on top of the picture you do this by applying position:relative to the parent and position:absolute to the child so it will be positioned within it's parent. Then apply transform: translate() to translate the overlay dependant on it's size to achieve the offset on the right hand side.
Here's a pen : https://codepen.io/NeilWkz/pen/qgRMyW
<div class="img-hero-with-menu-overlay">
<div class="left-img">
</div>
<div class="overlay">
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 1</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 2</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</div>
</div>
The CSS
img-hero-with-menu-overlay {
position: relative;
background-color: #bcbdc0;
width: 100%;
display: block;
}
.left-img {
height: 100vh;
display: block;
width: 75%;
background: url("https://www.llialighting.com/Content/files/ProductImages/v_06f3_angled448253599.png")
no-repeat center center;
background-size: cover;
}
.overlay {
position: absolute;
right: 0;
top: 50%;
transform: translate(-12.5%, -50%);
width: 40%;
}
.product-card {
display: flex;
margin-bottom: 1.5rem;
}
.info {
padding: 1.5rem;
}
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}
A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.