When I hover the content, I only want the image to be displayed and the content/text hidden. My code shows here that when I hover the content, the image is visible but the content is also displayed. I tried searching for solutions for this problem but
unfortunately, I didn't see any similar problems like this one.
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
You can hide the content with:
.menu-one:hover > div.menu-content,
.menu-two:hover > div.menu-content {
display: none;
}
Example:
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-one:hover>div.menu-content,
.menu-two:hover>div.menu-content {
display: none;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
add a child selector to the :hover stated and hide it as you please
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-one:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-two:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
Related
I need to create an empty topbar and an empty sidebar as below. I want to stack them neatly so that the top of the sidebar touches the bottom of the topbar. For that, I am using percentage. However, I just can't get them to do that.
I saw some other threads suggesting to set html and body with height: 100%; and width : 100%. But in my app, the layout below is not in the main html document.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 0;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>
Your #nav-bar has a height: 10%, and you can set the same value for the top rule, selector #side-bar.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 10%;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>
I tend to use flex box for this, Maybe grid would be smarter though. I took also care of some scrolling things. Using min with and height 0 on flex parents is key for that.
body,
section {
min-height: 0;
min-width: 0;
}
body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
height: 2rem;
background: green;
}
section {
flex: 1 1 0%;
display: flex;
}
aside {
width: 4rem;
background: blue;
height: 100%;
}
main {
background: pink;
flex: 1 1 0%;
overflow: auto;
padding: 1rem;
}
div {
border: 1px black dashed;
height: 300%;
}
<nav></nav>
<section>
<aside></aside>
<main>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br>
</div>
</main>
</section>
I have a left navbar that has a height of 100% but when there's any overflow the 100% height doesn't work.
I tried giving body and html height of 100% and min-height of 100%. I also tried giving the menu min-height: 100% and 100vh height. I read a lot of StackOverflow questions but none of the solutions worked for me.
Here's the code: Or codepen: shorturl.at/dgvFL
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial
}
.nav-bar {
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
Use position: fixed if you want to fix navbar position.
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial;
}
.nav-bar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
margin-left: 30%;
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
what I am trying to accomplish is to make a frosty glass effect for a header. The header has a white background with black text and is fixed. The idea is that the content that is behind this header (when scrolling down) is shown with the frosty glass effect.
I succeeded partly by changing the opacity of my header to 0.9, but I can't get the blur effect (via filter) to work. Anybody an idea what I have to change? Here is my code:
html,
body {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
color: black;
}
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
main {
width: 100%;
background: lightblue;
section {
padding: 80px;
}
h1 {
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
}
.outer-header {
// background-repeat: no-repeat;
// background-attachment: fixed;
// background-size: cover;
// background-position: top;
// background-image: url(https://4bp.blogspot.com/-1f1sdfix3dy/Uh92eZAQ90I/AAAAAAAAHM4/5oiB4zC_tQ4/s1600/Photo-Background-White4.jpg);
background: white;
height: 80px;
position: sticky;
top: 0px;
left: 0px;
opacity: 0.9;
overflow: hidden;
z-index:4;
&::after {
z-index: -1;
content: "";
background: inherit;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
// filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
}
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
img {
height: 50px;
cursor: pointer;
object-fit: cover;
}
h1 {
position: relative;
}
.logo-text {
font-size: 33px;
position: absolute;
left: 50px;
top: 6px;
}
nav,
ul {
display: flex;
grid-column-gap: 20px;
justify-items: end;
align-items: center;
}
<div class="outer-header">
<header>
<h1>
<img src="https://source.unsplash.com/random/287x287" />
<span class="logo-text">Company</span>
</h1>
<nav>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</nav>
</header>
</div>
<main>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section> <section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section> <section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
</main>
You are looking for the (still experimental) backdrop-filter property. However, browser support is still a bit scarce. For Firefox, it will land in the upcoming version 70 behind a developer flag. Safari still requires the -webkit- vendor prefix. But you can test this working example in a current version (76+) of Chrome.
body {
background: url(http://placekitten.com/800/600) no-repeat;
}
#overlay {
width: 50vw;
height: 50vh;
background: rgba(255,255,255,0.4);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
<div id="overlay"></div>
I am trying to center images inside my <article> and <aside>, and i am not sure what's wrong with the code. I tried to make some adjustments using article#tablet but no success. Now the images lays on the left, no matter what...if i inspect the item and give it a margin or padding it will react. But can not center it.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://via.placeholder.com/150x150" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Any help i would appreciate. Thank you
You can make use of flexbox in this situation. According to your need, just use the align-items and justify-content properly.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
display: flex;
align-items: center;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
.img-wrapper img {
width: 50px;
height: 50px;
}
.img-wrapper {
display: inline-flex;
align-items: center; /**Vertical */
justify-content: center; /**Horizontal */
height: 100%;
flex: 1;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet" class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Your CSS does not have any styles for images.
To center the image in your you have to select it and apply styles to it, for example an auto margin and display: block:
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
/* Added this */
article img,
aside img {
display: block;
margin: 0 auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="./img/hand_ipad.png" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://picsum.photos/200/300" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://picsum.photos/300/300" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
You want to center the image inside the <aside> and <article> right ?
Just add property : text-align : center in the aside and article, the images inside them will be centered.
Checkout in codepen for more detail
https://codepen.io/anon/pen/PddMYZ
Or only necessary code here (The css file) :
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
text-align : center;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
aside{
text-align : center;
}
This is another simple method.
I have wrapped image in a div and added single css line for that div.
section {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
width: 50%;
background-color: #A2B2C1;
}
aside {
float: right;
width: 50%;
background-color: #C3D7DF;
}
/*css which I have added*/
.img-wrapper {
text-align: center;
}
<section>
<article>
<h2>Article Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</article>
<aside>
<h2>Aside Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</aside>
</section>
I have 4 columns in which I have images with different sizes followed by a absolutely positioned mask, appearing on hover.
The width of mask exceeds the images
How can I set the mask always the same width as the width of the image?
https://jsfiddle.net/tsjzrmra/2/
HTML
<div class="wrap"><div class="row">
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/120X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/150X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/180X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
CSS
* { box-sizing: border-box; }
.wrap{
width: 87%;
margin: auto;
padding: 0 10px;
background-color: rgba(255,255,255,0.9);
overflow: hidden;
box-shadow: 0 0 5px #eee;
}
img{
max-width: 100%;
height: auto;
}
[class*='col-']{
float:left;
}
.col-1-3{
width: 33.33%;
padding: 20px;
}
.col-2-3{
width: 66.66%;
padding: 20px;
}
.col-1-4{
width: 25%;
padding: 10px;
}
.show{
width:100%;
height: 100%;
border: 1px solid rgba(0,0,0,0.04);
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
display: block;
border-radius: 4px;
}
.show .mask{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.show-first .mask {
opacity: 0;
background-color: rgba(0,0,0, 0.4);
transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
opacity: 1;
}
#media only screen and (max-width: 767px){
.col-1-4{
width: 50%;
padding: 10px;
overflow: hidden;
clear: right;
}
.wrap{
width: 100%;
margin: auto;
overflow: hidden;
}
.mobile-clear{
clear:both;
}
}
Add a div wrapper around the content:
<div class="show show-first">
<div class="mask-wrapper">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
then update the CSS
.mask-wrapper: {
position: relative;
display: inline-block;
}
.show {
text-align: center;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
img {
max-width: 100%; // it's better to change it into a class instead
}
Answer
You may simply remove this definition:
width: 100%;
and edit this one
display: block;
into
display: inline-block
for <div class="show">. Also if you want the <div class="show">s to have center aligned, you need to add
text-align: center;
to <div class="col-1-4">.
In action:
* {
box-sizing: border-box;
}
.wrap{
width: 87%;
margin: auto;
padding: 0 10px;
background-color: rgba(255,255,255,0.9);
overflow: hidden;
box-shadow: 0 0 5px #eee;
}
img{
max-width: 100%;
height: auto;
}
[class*='col-']{
float:left;
}
.col-1-3{
width: 33.33%;
padding: 20px;
}
.col-2-3{
width: 66.66%;
padding: 20px;
}
.col-1-4{
width: 25%;
padding: 10px;
text-align: center;
}
.show{
height: 100%;
border: 1px solid rgba(0,0,0,0.04);
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
display: inline-block;
border-radius: 4px;
}
.show .mask{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.show-first .mask {
opacity: 0;
background-color: rgba(0,0,0, 0.4);
transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
opacity: 1;
}
#media only screen and (max-width: 767px) {
.col-1-4{
width: 50%;
padding: 10px;
overflow: hidden;
clear: right;
}
.wrap{
width: 100%;
margin: auto;
overflow: hidden;
}
.mobile-clear{
clear:both;
}
}
<div class="wrap">
<div class="row">
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/120X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div><div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/150X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div><div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/180X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
</div>
</div>
try this script,
$('.show').hover(function(){
var getimg = $(this).find('img').width();
//alert(getimg);
$('.mask').css({'width':getimg})
});
Try this Demo