I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.
.link{float:left;}
.link a {
color: #000;
font-size: 15px;
font-weight: 400;
padding: 10px;
display: inline-block;
border: 1px solid #b6fe54;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.link a:before {
position: absolute;
content: "";
width: 0px;
background: #b6fe54;
left: 0px;
top: 0px;
height: 100%;
z-index: -1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.link a:hover:before {
width: 100%;
}
<div class="link">Learn More</div>
Add the following
<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>
Related
I have two divs side by side with an iframe. When I hover over the div on the left, I want the iframe on the right to resize to 50% width. The div on the left would then be resized to be 50%. I would prefer a pure CSS approach to this.
.answer6{
float:left;
width: 100%;
}
.mpi-options-all2 {
float: left;
width: 100%;
bottom: 75px;
right: 75px;
padding: 10px;
background-color: black;
color: white;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font-weight: bold;
text-align: left;
padding: 10px;
position: absolute;
right: -100%;
text-align: center;
top: 0px;
height: 505px;
z-index: 2;
-webkit-transition: right 0.5s ease-in-out;
-moz-transition: right 0.5s ease-in-out;
-o-transition: right 0.5s ease-in-out;
-ms-transition: right 0.5s ease-in-out;
transition: right 0.5s ease-in-out;
}
.left-right{
padding: 0px;
margin: 0px auto;
height: 525px;
position: relative;
overflow: hidden;
}
.left-right:hover .mpi-options-all2{
right: 0;
}
<div class="answer6">
<iframe src="https://wikipedia.org/wiki/Main_Page" width="75%" height="500" align="right"></iframe>
<div class ="left-right">
<div class="mpi-options-all2">
<h2><center>Description:</center></h2>
</div>
</div>
</div>
According to what I understood about the problem, here is a solution to see if it is correct.
<div class="answer6">
<div class ="left-right">
<div class="mpi-options-all2">
<h2><center>Description:</center></h2>
</div>
</div>
<iframe src="https://wikipedia.org/wiki/Main_Page" height="500" align="right"></iframe>
</div>
.answer6{
width: 100%;
}
.mpi-options-all2 h2{
display: none;
}
.mpi-options-all2 {
width: 100%;
bottom: 75px;
/*right: 75px;*/
padding: 10px;
background-color: black;
color: white;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font-weight: bold;
text-align: left;
padding: 10px;
/*position: absolute;*/
/*right: -100%;*/
text-align: center;
top: 0px;
height: 505px;
/*z-index: 2;*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.left-right{
padding: 0px;
margin: 0px auto;
height: 525px;
position: relative;
overflow: hidden;
float: left;
width: 2%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
iframe{
margin:0;
width: 97.7%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
float:right;
}
.left-right:hover .mpi-options-all2 h2{
display: block;
}
.left-right:hover{
width: 49.7%;
}
.left-right:hover ~ iframe{
width: 50%;
}
https://codepen.io/anon/pen/ROEogj
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
I am trying to have a corner button display new content on hover using the following setup:
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class="overlay"></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
</div>
</div> <!-- wrap -->
</div> <!-- panel body -->
</div> <!-- panel default -->
CSS:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap .overlay {
border-bottom: 40px solid #e8c63d;
border-left: 40px solid transparent;
bottom: 0;
height: 0;
opacity: .95;
position: absolute;
right: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.amg-corner-button_wrap:hover .overlay {
border-bottom: 800px solid #e8c63d;
border-left: 800px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap .overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Here is fiddle : https://jsfiddle.net/ar3jkuvq/
The hover deployment works well but the .overlay-content text does not show up if .amg-corner-button_wrap uses position: absolute. However I need it to keep the hover on the wrap only.
How can I keep the hover effect on the wrap only and show the text content at the same time?
You can use CSS3 transform property to scale the overlay instead of using a border, and then use a General sibbling combinator [w3] selector ~ to select the .overlay-content element that is preceded by a .amg-corner-button_wrap:hover.
Working fiddle
add this class in your css
.amg-corner-button_wrap{
width:100%;
height:100%;
}
I believe you can make use of the pointer-events attribute here.
Remove position: absolute; from .amg-corner-button_wrap
Add pointer-events: none; to .panel-default1
Add pointer-events: all; to .amg-corner-button_wrap .overlay
Working JSFiddle
I am having an issue. When I hover over the image, a dark overlay appears but CSS Transition property is not working on it.
Here is the html:
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
And CSS is:
.collection-category {
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
}
.collection-category img {
width: 100%;
max-height: 250px;
}
.collection_title {
display: table-cell;
vertical-align: middle;
font-size: 28px;
}
.overlay_wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.overlay {
display: none;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
display: table;
height: 100%;
width: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/cnbvoe32/
Any help would be highly appreciated.
thanks in advance.
It's because you can't transition from display: none to display: table.
Instead, you could transition the opacity property by setting the initial display to table along with opacity: 0 and then transitioning to opacity: 1:
Updated Example
.overlay {
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
opacity: 1;
}
I've been working on a site and I've encountered a problem with transitions which only only happens in Chrome. Somehow Chrome doesn't want to do the transition which every other browser I use ( Safari, Firefox ) does.
Here's the HTML:
<div class="kategoria_box">
<div class="kategoria_box_header">
<h4>Fürdő</h4>
</div>
<div class="kategoria_box_image">
<a href="termekek/kategoriak/furdo/">
<img src="http://mondano.hu/img/furdo.jpg">
<span class="caption">
<p>Fürdőszoba</p>
</span>
</a>
</div>
</div>
and here's the CSS:
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
Is something wrong about my code apart from being coded in my own unique style ?
You don't need the webkit- prefix anymore. You forgot to set top:0 for span.caption
http://caniuse.com/#feat=css-transitions
Here's my codepen:
http://codepen.io/dschu/pen/XbwYom
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
transition: all 600ms ease-out;
top: 0;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}