&__img{
height: 100%;
transform:translate(-4rem) scale(1.4)
}
&__caption{
position: absolute;
top: 50%;
left:50%;
font-size: 1.6rem;
color:#f7f7f7;
text-align: center;
text-transform: uppercase;
transform: translate(-50% ,20%);
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
opacity: 1;
transform: translate(-50%,-50%);
}
&:hover &__img{
}
<div class="row">
<div class="story">
<figure class="story__shape">
<figure-caption class="story__caption">
mary smith
</figure-caption>
<img src="img/nat-8.jpg" alt="Customer Profile" class="story__img">
</figure>
<div class="story__text">
<h3 class="heading-teritiary u-margin-bottom-small">I have best weekend </h3>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem incidunt illo harum nam. Nesciunt dolores commodi aliquid, asperiores animi quo illum impedit itaque in optio iure, totam, illo ipsum tempore.</p>
</div>
</div>
</div>
The hover effect is not applied. It hides the caption and the text. When I hover it is supposed to show them.
Also the scale doesn't change. I can't figure out what is happening.
Related
Website: http://www.asia-hr.com > Home > Team > click on any faces
On my team section, when you click on a face, the bio is popping up. However, I am facing two problems:
1) It's going down very far on click, I would like to be more centered on the picture and bio.
2) I would like to have a slower transition
Do you have any ideas of what can be the issue and how can I fix it?
CSS:
.team-section{
overflow:hidden;
text-align:center;
background: #34495e;
padding: 60px;
}
.team-section h2{
color: white;
}
.ps{
margin-bottom: 40px;
}
.team-section .ps .p{
width: 250px;
height: 250px;
overflow:hidden;
border-radius: 50%;
margin: 0 30px;
display:inline-block;
-webkit-border-radius: 50%;
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.team-section .ps .p img{
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
transform: translateX(-50%);
filter:grayscale(100%);
transition: 0.5s all;
}
.team-section .ps .p img:hover{
filter: none;
}
.team-section .section{
width:600px;
margin:auto;
font-size: 20px;
color:white;
text-align: justify;
height: 0;
overflow: hidden;
}
.team-section .section:target{
height: auto;
}
.team-section .name{
display:block;
font-size: 22px;
text-align: center;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
HTML
<div class="team-section">
<h2>Our Team</h2>
<span class="border border-1"></span>
<div class="ps">
<div class="p">
<img src="./images/home/h1.jpg">
</div>
<div class="p">
<img src="./images/home/h2.jpg">
</div>
<div class="p">
<img src="./images/home/h3.jpg">
</div>
</div>
<div class="section" id="p1">
<span class="name">Sophia Letana</span>
<span class="border border-1"></span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p2">
<span class="name">Francois Le Chene</span>
<span class="border border-1"></span>
<p>gh ghgh ghg sit, amet consectetur ghgh elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p3">
<span class="name">Steve Mansoa</span>
<span class="border border-1"></span>
<p>Lghgh ipsum gh sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
</div>
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>
I have code below for a pure CSS accordion list. I was wondering if its possible to have the text under the heading sort of fly in like the example here: http://codepen.io/pirrera/pen/KwzMGZ ,but using pure CSS only? Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align:center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size:14px;
font-family:Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #f4f8fc;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
}
.tab-content p {
margin: 1em;
}
/* :checked */
.input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox] + .label::after {
content: "+";
}
.input[type=radio] + .label::after {
content: "";
}
.input[type=checkbox]:checked + .label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked + .label::after {
transform: rotateX(180deg);
}
.bottombar{
content: "";
display:block;
height:1em;
width:100%;
background-color:#00688B;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox"/>
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox"/>
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="bottombar"></div>
</div>
You can animate the scale of the paragraph when checkbox is checked
.input:checked~.tab-content p {
transform: scale(1);
}
see code below:
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 20px;
background: #c3d7ea;
}
.tab-content .container {
padding: 1em;
margin: 0;
transform: scale(0.6);
-webkit-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 10em;
}
.input:checked~.tab-content .container {
transform: scale(1);
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox" />
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
<div>this is another div</div>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox" />
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox" />
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
Yeah, you can shrink the content using transform: scale() and hide it using opacity: 0, then transition those to normal values when the label/input are :checked
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #005bab;
overflow: hidden;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: white;
}
.tab-content p {
padding: 1em;
margin: 0 0 0 2em;
background: #f4f8fc;
}
/* :checked */
.input:checked ~ .tab-content {
max-height: 10em;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox] + .label::after {
content: "+";
}
.input[type=radio] + .label::after {
content: "";
}
.input[type=checkbox]:checked + .label::after {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.input[type=radio]:checked + .label::after {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
.tab-content {
transform: scale(0.5);
opacity: 0;
transition: transform .5s, opacity .5s, -webkit-transform .5s, max-height .5s;
}
input:checked ~ .tab-content {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Label One</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox"/>
<label class="label" for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-three" type="checkbox"/>
<label class="label" for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="bottombar"></div>
</div>
Use transform: scale() to "grow"/"shrink" the content, and transition for the effect.
Pen: https://codepen.io/kjkta/pen/MmLewZ
I've added:
.tab-content {
transition: .5s transform;
transform: scale(.1);
}
.input:checked ~ .tab-content {
transform: scale(1);
}
EDITED
This is a simple and functional example: However, you can't simulate an "onclick" event with css. You also can check this post for more clarification: Can I have an onclick effect in CSS?
If you do not mind having a little bit of pure JavaScript in your code, see this example:
https://jsfiddle.net/8xs83phb/
If you want an "hover" event based accordion, see the below code.
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
h2 {
margin: 0;
text-align: center;
font: normal 22px Arial, Verdana;
}
.box {
width: 200px;
max-height: 40px;
padding: 10px 0;
background: #fdfdfd;
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
border-bottom: 1px solid black;
transition: all 0.5s;
}
.box:hover {
max-height: 300px;
}
<ul>
<li>
<div class='box'>
<h2>Item One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
<li>
<div class='box'>
<h2>Item Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
<li>
<div class='box'>
<h2>Item Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</li>
</ul>
Can anyone tell me a solution to make the page not jump back to the top when this CSS driven popup box closes?
At the moment the popup opens in the correct place but when you close it, the page jumps back to the top.
body {
font-family: Arial, sans-serif;
background-color:#721213;
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
min-height:500px;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
.iframe {
width:95%;
display:block;
margin:0px auto 0px auto;
height:500px;
}
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<div style="width:50%; margin:20px auto; height:500; padding:200px 50px 20px 50px;">
Let me Pop up
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<iframe class="iframe" src="http://www.impressdesign.com.au/clients/IMP/test.pdf"></iframe>
</div>
</div>
</div>
</div>
Weave: http://kodeweave.sourceforge.net/editor/#3cfa8a8181c0ffdc30103eb2bc19d9b3
Weave: (properly use a hash on an href)
http://kodeweave.sourceforge.net/editor/#3a84a44278b04eea7b5d0f067ba22427
Stop using href="#" and start using href="javascript:void(0)" instead.
The reason it jumps to the top is because when you use a hash in a href attribute it directs to an ID if none is specified it goes to the top by default. Unless you use e.preventDefault() using a click event in JS.
Because you're using :target This can easily be fixed by targeting a new ID.
So change this...
Let me Pop up
<a class="close">×</a>
to this...
Let me Pop up
<a class="close" href="#showpopup">×</a>
and it's fixed!
NOTE: You can do the same effect using a input[type=checkbox] instead of :target: http://kodeweave.sourceforge.net/editor/#8d7733f82faf240e0edcb6739c5d1a1a
A few key notes:
margin:0px auto 0px auto;
Values of 0 shouldn't have units specified.
Also it's bad practice to add CSS to your HTML element
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<!--
Instead put your CSS in your style sheet as a class;
that way it's easier to manage, maintain and get help if needed.
-->
<div class="box"></div>
Here is an example of one way on how to properly use a hash tag on a href attribute.
body {
padding: 1em;
width: 50%;
margin: 0 auto;
text-align: center;
}
.left {
text-align: left;
}
<ul class="left">
<li>
Lorem.
</li>
<li>
Ispum!
</li>
<li>
Dolor!
</li>
<li>
Sit!
</li>
<li>
Amet!
</li>
</ul>
<p id="lorem" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste distinctio omnis a nihil, quisquam nisi similique facere, reprehenderit sint nostrum. Ipsa quibusdam, adipisci laudantium nam voluptatum quasi animi placeat eveniet.
</p>
<p id="ipsum" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora quasi, maiores debitis cupiditate laboriosam alias placeat temporibus veritatis. Quisquam, debitis dolorem saepe enim maiores, ex numquam corporis atque magnam.
</p>
<p id="dolor" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto quia officiis, amet. Eaque, et quia ducimus possimus rem suscipit, maxime, porro mollitia, corporis sequi magnam debitis. Expedita iure, maiores.
</p>
<p id="sit" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ipsum vitae quasi, id reiciendis iure qui veritatis voluptatibus omnis libero ea, labore voluptate maxime, ducimus tenetur, deleniti. Rem, consequatur, accusantium.
</p>
<p id="amet" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum maiores saepe sunt commodi soluta minus ad. Facilis magnam, distinctio voluptatibus ratione iste, laboriosam hic perspiciatis molestiae repellat accusamus tempora cumque!
</p>
Go to top
it happens because your button for closing is a element and href="#" change it to div element instead of a
EDIT :
i dont know why i got arrow down/point down but
i will explain it easier for you
Your CODE :
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
</div>
The what i suggest :
<div class="popup" id="popup">
<h2>Here i am</h2>
<div onClick="document.getElementById('popup').style.display='none';">X</div>
</div>
we added id="popup" to (div.popup) element, then we replaced " element" close button with
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