I have created a div with 4 boxes inside. Each one contains an image with an overlay on hover, but for some reason I have ended up with a margin/padding at the bottom of each box and I cant figure out why.
I have even tried using float intead of inline-block for .showcase-item, but nothing I do will remove it. Can anyone help?
HTML:
<div class="showcase">
<div class="showcase-item"><ul class="img-list"><li>
<img src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" style="width: 100%"><span class="text-content"><span>Place Name</span></span></li></ul>
</div><div class="showcase-item"><ul class="img-list"><li>
<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/1756353485.jpg" style="width: 100%"><span class="text-content"><span>Place Name</span></span></li></ul>
</div><div class="showcase-item">
<img src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" style="width: 100%">
</div><div class="showcase-item">
<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/1756353485.jpg" style="width: 100%">
</div>
</div>
CSS:
.showcase-item {
width: 25%;
background: black;
display: inline-block;
margin: 0;
position:relative;
transition: all 0.5s ease-in-out;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
margin: 0;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0; margin: 0; width: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
pan.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
fiddle: http://jsfiddle.net/ambersabre/9r7wvnsx/4/
It's some sort of bug with images. Apply img {display: block;}
Inline-block elements behave just like letters: they create a little gap after each 'letter'. So I recommend you to change margin: 0 to:
.showcase-item {
margin-left: -5px;
}
http://jsfiddle.net/9r7wvnsx/5/
Also you can read about this problem here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
<img> is an inline element by default. This removes the gap:
img{
vertical-align: top;
}
DEMO HERE
Try This
.showcase-item {
width: 25%;
background: black;
display: inline-block;
margin: 0;
position:relative;
transition: all 0.5s ease-in-out;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
margin: 0;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0; margin: 0; width: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
img {
display:block;
}
Demo
You can also try to remove padding/margin from the div:
<div style="margin-bottom:0; padding-bottom:0"></div>
Related
What I want to do in the bigger picture is delay the popup for a few seconds after page-load using pure CSS. I've decided the best way to do that is by transitioning the opacity, then using transition-delay to delay it for a few seconds.
My problem is that transition doesn't work and won't delay the popup (nor the dark overlay).
Why is that and how can I fix it?
If it's not possible, is there another way to delay the popup for a few seconds?
hr {
clear: both;
margin-top: 15px;
margin-bottom: 15px;
border: 0;
border-top: 1px solid #aaaaaa;
}
#css-only-modals {
position: fixed;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000000;
text-align: center;
white-space: nowrap;
height: 100%;
}
#css-only-modals:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.css-only-modal-check {
pointer-events: auto;
}
.css-only-modal-check:checked~.css-only-modal {
/* FOR TRANSITION */
opacity: 1;
transition: opacity 3s;
/*NOT WORKING */
pointer-events: auto;
}
.css-only-modal {
width: 360px;
background: #FFF;
z-index: 1;
display: inline-block;
position: relative;
pointer-events: auto;
padding: 25px;
text-align: right;
border-radius: 4px;
white-space: normal;
display: inline-block;
vertical-align: middle;
opacity: 0;
pointer-events: none;
}
.css-only-modal h2 {
text-align: left;
color: #1A1A1C;
}
.css-only-modal p {
text-align: left;
}
.css-only-modal-close {
position: absolute;
top: 25px;
right: 25px;
}
.css-only-modal-check {
display: none;
}
.css-only-modal-check:checked~#screen-shade {
/* FOR TRANSITION */
opacity: 0.5;
transition: opacity 3s;
/*NOT WORKING */
pointer-events: auto;
}
#screen-shade {
opacity: 0;
background: #000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.8s;
}
.stripe>.container>p,
.stripe>.container>ul {
text-align: left;
padding: 35px;
margin: 0;
}
#nav-spacer {
display: block;
height: 50px;
}
.stripe {
width: 100%;
text-align: center;
overflow: hidden;
}
.css-only-modal-btn {
background-color: #BD2C15;
color: white;
padding: 8px 18px;
letter-spacing: 0.5px;
}
.css-only-modal-btn:hover {
color: #BD2C15;
background-color: transparent;
outline: 2px solid #BD2C15;
transition: background-color 0.5s, color 0.5s;
}
<label for="modal1">
<div id="css-only-modals">
<input id="modal1" class="css-only-modal-check" type="checkbox" checked/>
<div class="css-only-modal">
<label for="modal1" class="css-only-modal-close"><i class="fa fa-times fa-2x"></i></label>
<h2>Referral</h2>
<hr />
<p>Refer a customer, email me and receive a 25% commission. <br> Earn up to 1225$ from a single referral!</p>
<hr />
<label for="modal1" class="css-only-modal-btn">NICE!</label>
</div>
<div id="screen-shade"></div>
</div>
</label>
In the CSS I created two comments "FOR TRANSITION". They mark the opacities I want to transition.
Put the transition on your initial element.
.css-only-modal-check {
pointer-events: auto;
}
.css-only-modal-check ~ .css-only-modal {
/* FOR TRANSITION */
transition: opacity 3s;
}
.css-only-modal-check:checked ~ .css-only-modal {
opacity: 1;
pointer-events: auto;
}
.css-only-modal {
width: 360px;
background: #FFF;
z-index: 1;
display: inline-block;
position: relative;
pointer-events: auto;
padding: 25px;
text-align: right;
border-radius: 4px;
white-space: normal;
display: inline-block;
vertical-align: middle;
opacity: 0;
pointer-events: none;
}
Also make sure to keep the transition always set, only change the opacity to 0 on ~checked.
Also transition-delay must be underneath the transition.
here is the full modified code
.css-only-modal-check {
pointer-events: auto;
}
.css-only-modal-check ~ .css-only-modal {
/* FOR TRANSITION */
transition: opacity 3s;
}
.css-only-modal-check:checked ~ .css-only-modal {
opacity: 0;
pointer-events: auto;
}
.css-only-modal {
width: 360px;
background: #FFF;
z-index: 1;
display: inline-block;
position: relative;
pointer-events: auto;
padding: 25px;
text-align: right;
border-radius: 4px;
white-space: normal;
display: inline-block;
vertical-align: middle;
/*opacity: 0;*/
transition: opacity 3s;
transition-delay:2s;
pointer-events: none;
}
I am missing how I should hide the :before element, and only make it visible when it is "inside" the button div, to create a filling effect on the hover button.
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt
Set the :before element height to 0 , then change it on :hover:before to 100%
The snippet
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 0;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
height:100%;
}
buttt
you can wrap your link in a div and set overflow to hidden like this :
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.wrap {
float: left;
width: 65px;
height: 32px;
overflow: hidden;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
<div class="wrap">buttt</div>
Add display:inline-block and overflow:hidden to a.button styling, as default display of a tag is inline.
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
overflow:hidden;
display:inline-block; /* Add this */
overflow:hidden; /* Add this */
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt
Only insert This:
a.button {
display: inline-block;
overflow: hidden;
//Other Codes...
}
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
display: inline-block;
overflow: hidden;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt
I want to make a header appear to have an animated underline when the parent element is hovered. Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do. Does someone know what I'm missing or need to add to my code to make this happen? The code below is what I think is relevant to fixing the situation. The entire project can be viewed via this CodePen as well. Thanks in advance! (The underlining is only applied to the first header when hovering).
HTML:
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline"></div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
<div class="image-block">
<h3>Swallow Tail</h3>
<img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="image-block">
<h3>Directional</h3>
<img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS:
.image-block:hover > h3{
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 10px;
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
Edit:
I am trying to use the same ideas from someone else's Underlining Effect CodePen. The biggest difference is I don't want to have an <a> inside my header.
If you apply width: 100% to the .underline rule it begins the animation from the center.
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%; /**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
Adjusting the width of the line
To adjust the width of the line you can change the following:
.underline{
margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
width: 80%;
}
.image-block:hover .underline {
width: 80% /*<== Set to match the .underline width */
}
* {
box-sizing: border-box;
}
.row {
min-width: 100%;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.image-block {
position: relative;
width: 33.33%;
float: left;
margin-top: 0;
z-index: 5;
}
.image-block:hover {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.image-block h3 {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
top: 40%;
width: 100%;
font-size: 48px;
letter-spacing: 5px;
margin: 0;
transition: all .3s ease-in-out;
}
.image-block:hover>h3 {
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%;
/**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
.flex-image {
width: 100%;
height: auto;
display: flex;
}
#media all and (max-width: 1200px) {
.image-block {
width: 33.33%%;
}
}
#media all and (max-width: 1660px) {
.navbar a {
padding: 14px 14%;
}
}
#media all and (max-width: 1035px) {
.navbar a {
padding: 14px 12%;
}
}
#media all and (max-width: 880px) {
#top-image {
margin-top: 150px;
}
.image-block {
width: 100%;
margin: 0;
}
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar a:hover {
transform: scale(1);
}
}
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline">
</div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
</div>
I want to show panel1(div) when I hover button1, show panel2(div) when I hover button2. But the problem now is that the panel won't align top with the button. I've tried "Vertical-Align, Align-items", still couldn't figure out how to do it, please help!
But it always display like this:
Here is my code
HTML:
<div class="Nav">
<span id='Span_Nav'>
<button class="Btn_Nav" id="Btn_Nav_Equipment" >
<div class="Panel_Nav" id='Panel_Equipment'></div>
<span>
<label class="Lb_Nav">Equipment</label>
</span>
</button>
<button class="Btn_Nav" id="Btn_Nav_Report">
<div class="Panel_Nav" id='Panel_Report' ></div>
<span>
<label class="Lb_Nav">Report</label>
</span>
</button>
</span>
</div>
CSS:
.Btn_Nav{
width: 100%;
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
border: 0;
height: 6vh;
}
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
color: white;
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100%;
top:10vh;
}
button > div.Panel_Nav {
margin-top: 0;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 6vh;
background: #0f5787;
border: 2px solid;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Check your answer here https://jsfiddle.net/g3yL9cro/1/
.Btn_Nav{
position: relative;
}
button:hover > div.Panel_Nav {
top: 0px;
}
Update 2: Based on OP's fiddle
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100px;
top:10px;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 20px;
background: #0f5787;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Update 1:
CSS code
body {
padding: 5px;
background: blue;
}
.Btn_Nav{
width: 10%;
background: #eee;
background-color: #eee;
display: block;
margin: 20px;
border: 0;
height: 100%;
}
.Btn_Nav > span > label.Lb_Nav{
color: #333;
background: transparent;
background-color: transparent;
display: block;
}
#Span_Nav{
position: absolute;
width: 100%;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
display: none;
opacity: 0;
left: 12%;
width: 50%;
height: 18px;
background: #0f5787;
}
button:hover > div.Panel_Nav {
display: block;
opacity: 1;
}
Adding a top value fixes the issue.
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
top: 0;
}
All right? I'm having problems with an effect on CSS. Everything works perfectly until I put the code inside another div, and has a background that is not transparent. Look at the example below:
body {
background: #2ecc71;
padding:0;
margin:0;
}
#bg{
background: #000;
}
.container-button {
padding: 10em;
margin: 0 auto;
width: 1170px;
text-align: center;
display: block;
overflow: hidden;
}
/* GENERAL BUTTON STYLING */
.btn-more-info{
display:block;
overflow: hidden;
text-align: center;
display: inline-block;
float: left;
}
.btn-more-info a,
.btn-more-info a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-more-info a {
background: none;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}
.btn-more-info a:hover {
color: #2ecc71;
}
/* BUTTON EFFECT */
.btn-effect {
overflow: hidden;
}
.btn-effect::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-effect:hover:after {
height: 100%;
width: 135%;
}
.btn-send{
overflow: hidden;
text-align: center;
clear: both;
}
.btn-send a,
.btn-send a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-send a {
background: none;
border: 2px solid #353B4C;
border-radius: 5px;
color: #353B4C;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-send a::before,
.btn-send a::after {
background: #353B4C;
content: '';
position: absolute;
z-index: -1;
}
.btn-send a:hover {
color: #FFF;
}
<div id="bg">
<div class="container-button">
<div class="btn-more-info">
Continue lendo
</div>
<div class="btn-send">
Enviar mensagem
</div>
</div>
</div>
You see, if you remove the id="bg" effect functions normally.
Can anyone help me?
Thank U!
The problem is on the z-index of the :before and :after.
Try this:
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: 0;
}
Also increase the z-index on the text inside the button.