My CSS transition suddenly stops as shown in the following image
This only happens on Chrome, on Firefox everything works normally, other than that I cannot test.
The interesting thing is not only that the transition stops for no reason, but is that once I right-click on a button with this class, it works normally for the rest of the browsing session.
The following image is what the button looks like when the working transition ends:
HTML and CSS code
.main-link{
position: relative;
display: block;
overflow: hidden;
width: 200px;
height: auto;
color: #FFF;
text-align: center;
text-decoration: none;
border: 2px solid #53c1f8;
}
.main-link::after {
position: absolute;
overflow: none;
content: "";
background: #53c1f8;
left: 50%;
top: 50%;
height: 0%;
width: 100%;
z-index: -1;
transition: 0.75s ease-in-out;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.main-link:hover::after {
height: 15em;
}
<body>
<div id='main'>
<div id='content'>
<div id='main-image'>
<div id='main-image-intro'>
<ul id='main-image-cto'>
<li>
<a href='subscribe.html' class='main-link'> GET STARTED </a>
</li>
<li>
<a href='subscribe.html' class='main-link'> GIFT IT </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Tested under Ubuntu 15.10:
Chromium 47.0.2526.73
Mozilla Firefox 43.0.4
Edit:
I completely changed my answer. Think this should work in any modern browser and be a more save option.
a.button {
color: black;
height: 50px;
width: 200px;
border: 2px solid black;
padding: 10px 30px;
text-decoration: none;
font-family: Helvetica;
position: relative;
display: inline-block;
line-height: 50px;
text-align: center;
transition: color 0.2s ease-out;
overflow: hidden;
}
a.button:after {
position: absolute;
content: '';
background-color: black;
height: 100%;
width: 1px;
left: 65%;
top: 0;
z-index: -1;
transition: transform 0.4s ease-out;
transform: skew(45deg) scale(0,1);
margin-left: -20%;
}
a.button:hover {
color: white;
}
a.button:hover:after {
width: 1px;
background-color: black;
transform: skew(45deg) scale(400, 1);
}
<a class="button" href="">Button</a>
Related
and I'm trying to add a black container below my video and add the title and description inside that black container on hover, but the description in overlapping the black container how to l keep it inside the black container.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
overflow: hidden;
white-space: nowrap;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 250px;
background-color: #141414;
border-radius: 5px;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
so l want to contain the description to be inside that black background that comes when l hover. can someone assist how to contain the paragraph tag not to overlap
You can update your CSS with following code
.description {
white-space: normal;
}
white-space:normal Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
In the CSS for div of class description add this rule
.description{
word-wrap: break-word;
}
CSS word-wrap property is used to break the long words and wrap them onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 300px;
background-color: #141414;
border-radius: 5px;
word-wrap: break-word;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
word-wrap: break-word;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
I am trying to create an effect when div class="container" is being hovered, a smooth upper transition occurs of another div from bottom. Only during hover, this should happen cause I want that .bottom div to be hidden. When that div is not hidden, I can see the effect as I want. But as I hide the bottom div, that hovering effect smooth transition effect cannot be seen. Check this code once.
HTML CODE
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
CSS code
.box{
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top:80px;
left:0;
/* display: none; */
}
.box:hover .bottom {
display: block;
transition: linear 0.2s;
top:55px;
}
Here is the codepen link
https://codepen.io/Biebk/pen/MWpREqb
First off, rather than display: none to hide the incoming element altogether, you can set its opacity to 0, and then when the parent is hovered, set it to 1, like so:
.bottom {
opacity: 0;
}
.box:hover .bottom {
opacity: 1;
}
I suppose that given you want an incoming "pull-up" effect on hover, you want to that element to also "pull-down" when the hover ends. You can reverse the same effect by using a :not(:hover) on the parent element:
.box:not(:hover) .bottom {
opacity: 0;
}
Also, be sure to set the transition on the non-hovered state. The following example provides the smooth transition you're looking for:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
transition: all .25s ease;
}
.box:not(:hover) .bottom {
top: 80px;
opacity: 0;
}
.box:hover .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
A secondary approach would be to place the bottom div as a sibling to the box, and use the adjacent sibling combinator to apply the hover effects:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
font-size: 20px;
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
top: 80px;
opacity: 0;
cursor: default;
transition: all .25s ease;
}
.box:hover + .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
</div>
<div class="bottom">
Everyone
</div>
Use opacity property rather than display to achieve the desired effect, then
use the following code
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
opacity: 0;
}
.box:hover .bottom{
opacity: 1;
transition: opacity 0.2s , top 1s;
top: 55px;
}
Use the following code.
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.hovered{
transition: all .2s;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
visibility: hidden;
}
.hovered:hover+.bottom {
transition: all .2s;
top: 55px;
visibility: visible;
}
<div class="box">
<div class="hovered">Hello</div>
<div class="bottom">
Everyone
</div>
</div>
I have a popup in which I made a toggle with the help of pure CSS. Now if I run The popup and move my mouse at the uppermost or the lowermost part of the window the popup start disappear. I am using 0% JAVASCRIPT inside my popup code and can't find what was a reason in the code.
here is the issue:https://imgur.com/a/wHjHB7A
focus on the mouse cursor! Also, I am looking a way to open a popup at the page load without js
POPUP code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
.modalDialog>#__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}
.profile_container {
height: 160px;
width: 400px;
background: #;
display: inline-block;
}
.profile_div {
height: 120px;
width: 130px;
margin-top: 20px;
margin-left: 130px;
background: #ddd;
border: 1px solid grey;
}
.head_div {
min-height: 12px;
width: 100%;
}
.priv_cont {
height: 90px;
width: 400px;
background: #;
display: inline-block;
}
.priv_head {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #;
}
.clicker {
display: inline-block;
width: 100px;
height: 50px;
background-color: ;
color: #FFF;
}
.clicker:hover{border-bottom: 2px solid red ;
}
#click_styling
{
margin-top:20px;
height: 50px;
width: 197px;
text-align:center;
font-size:20px;color:#000;
line-height:50px;
text-decoration:none;
cursor:default;"
}
.clicker.hidden {
display: none;
}
.hiddendiv {
height: 0px;
background-color: green;
overflow: hidden;
transition: height 0.5s;
}
.social {
height: 160px;
width: 400px;
background: #ccc;
display: inline-block;
}
.social_link {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #ddd;
border: 1px solid grey;
}
.hiddendiv.nr2 {
background-color: red;
}
#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
display: none;
}
#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
display: inline-block;
}
#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
height: 150px;
}
Open Modal
<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
X
<div class="profile_container">
<div class="profile_div"></div>
</div>
<div class="head_div">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#8d8686;">
<I>Hey, please login to access your private content.</I>
</p>
</div>
<div id="showdiv1"></div>
<div id="showdiv2"></div>
<div>
SOCIAL
SOCIAL
MANUAL
MANUAL
<div class="hiddendiv nr1">
<div class="social">
<div class="social_link">
<div data-html="allow" >
<iframe id="iFrame1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<!-- End of facebook button -->
</div>
<div class="social_link">
<!-- Optional: Linkedin button starts here -->
<div data-html="allow" >
<iframe style="border: 0px; display: inline-block" class="spoooky-auth" src="https://api.spooo.ky/auth/linkedin" border="0"></iframe>
</div>
<!-- End of linkedin button -->
</div>
</div>
</div>
<div class="hiddendiv nr2">y</div>
</div>
<div class="priv_cont">
<div class="priv_head"><p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
<I>By continuing to the content you agree with the cookie
and privacy policies.</I> </p>
</div>
</div>
Any Idea?what was the issue?
Any input is apprecheated.
Thanks in Advance.
It appears your modalDialog box by default has an opacity of zero. Upon hovering it the opacity goes to one. Everything else is also nested in this div that upon no longer hovering the div, it all disappears.
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
In the example here, button.vertical-button__btn with the text "Description" is hoverable and clickable in all browsers but IE. (I've put a CSS border on hover to illustrate this. You can also see when the button is clickable by the 'hand' pointer appearing.)
A caveat: When I say it is not clickable in IE, I mean that the full button text (highlighted in yellow) is not clickable. Oddly, the extreme right edge of the button element does click and hover as intended.
What is causing this behavior, and how can I make the functionality the same in IE as with modern browsers?
I am only interested in supporting IE 11 and Edge... IE 10 and under do not need to be supported.
Edit:
Another odd behavior: If I remove the element div.project__image The button becomes clickable, but I cannot figure out why, and I need the div element to remain.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
I do believe that it's a matter of z-index.
If you add a z-index: 200 to your vertical-button, the button will be clickable, even in IE.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
z-index: 200
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
I have a button with the text "Description" that in IE is not clickable. Well, actually the far right edge of it is clickable, but not the whole button and text content of the button. It works fine in modern browsers (Chrome, Firefox), but not in IE. I am using IE 11 for testing. What is causing this and how do I fix it?
I've tried to strip out as much as possible...
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -68px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.vertical-button {
right: -100px;
}
.project--active .vertical-button {
opacity: 1;
}
.project__image,
.project__text {
position: relative;
width: 100%;
max-width: 408px;
margin: 20px auto;
margin-bottom: 0px;
}
.project__text {
height: 200px;
padding: 8px;
}
.project__image,
.project__text {
width: 280px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
padding-top: 20px;
padding-left: 20px;
}
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 18px;
margin: 30px auto;
width: 614px;
height: 246px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.project {
padding: 20px;
width: 740px;
height: 295px;
}
.l-wrapper {
position: relative;
width: 86%;
max-width: 1024px;
margin: 0 auto;
}
.l-wrapper {
width: 80%;
}
.l-clear::after,
.l-wrapper::after {
clear: both;
content: "";
display: block;
height: 0px;
visibility: hidden;
}
.l-section {
padding: 30px 0;
}
.l-section__bg {
background-color: #F2F2F2;
}
.l-container {
position: relative;
padding-bottom: 50px;
overflow: hidden;
background-color: #FFFFFF;
z-index: 99;
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div id="app">
<div data-reactroot="">
<div class="l-container">
<div class="l-section l-section__bg">
<div class="l-wrapper">
<div class="project project--active">
<div class="project__image"></div>
<div class="project__text">
<h3 class="project__heading">Title</h3>
<div class="vertical-button">
<button class="vertical-button__btn">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit
I have found that if I remove this piece of HTML the button becomes clickable...
<div class="project__image"></div>
But this still doesn't help me understand why it's happening or how to fix it! I cannot actually remove that div in the real project.
I don't have IE to test, but I can tell you some ideas from my experience.
1. Check if another element is overlapping your button.
Being IE, it may handle CSS differently, hence overlapping. Since removing that image class div resolves the problem, I'd guess this would be the cause of the problem.
2. Validate the HTML.
Forgetting to close tags can create very, very bizarre bugs, also difficult to find.
3. Try turning that button into an anchor <a>
There could be browsers who won't handle the click event properly.
4. Stop using IE :)
At least use Edge.