If you see the code here https://jsfiddle.net/ojagwxc0/ the following is not working :
.parallax > div .txparallax a {
position: absolute;
top: 50%;
right: 0;
margin-top: -49px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #3498db;
width: 126px;
height: 126px;
line-height: 126px;
text-align: center;
overflow: hidden;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
All I want to see is any kind of "movement" for the words "Select", "Fishing Tackle You Need" & "Mes cuml dia sed inenias ingerto lot aliiqt dolore ipsum commete".
What am I doing wrong? Please advice.
Try somthing like this. For a transition to work you need to be moving it somehow, for example here I'm, moving it from left:0px; to left:400px on hover:
https://jsfiddle.net/ojagwxc0/2/
.parallax > div .txparallax {
width: 100%;
padding-right: 150px;
display: inline-block;
position: relative;
left:0px;
}
.parallax > div .txparallax:hover{
left:400px;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
you should add an action on hover for ex:
a:hover{
background-color:red;
}
working fiddle : https://jsfiddle.net/ojagwxc0/1/
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
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>
I developed a sidebar. However I have a issue that the button required to open the sidebar gets invisible on mobile devices. If you know the position you can click on it and it works. The button to hide it works fine.
Here is a link to the website:
https://gdi.ethz.ch/jenkins/pages/current.html
And here the relevant html:
<div id="wrapper" class="container container-fluid col-md-12">
<header><nav id="sidebar-wrapper">
<ul class="sidebar-nav">
Some menue
</ul>
</nav>
</header>
<div id="main">
the site content
</div>
<footer></footer>
</div>
And the css code:
#menu-toggle {
position: fixed;
overflow:hidden;
z-index: 1100;
background-color: #009bf0;
color: white;
top: 0;
left: 249px;
padding-left: 10px;
padding-top: 3px;
width: 40px;
height: 40px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #menu-toggle {
left: 0px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #009bf0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Because the element is in a fixed position it is getting cut off when your screen gets smaller on mobile.
You'll either need to adjust how it handles the viewport or have its width adjust with the screen.
The problem is that the was inside the fixed #sidebar-wrapper. This resulted in an issue in chrome mobile. By moving the #menu-toggle outside the #sidebar-wrapper everything worked fine.
I want to make an effect that would trigger my button transition when I hover the outer div box (parent) that already has its own transition. Can this be done with css or is it in need of some javascript?
My example:
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
position: absolute;
margin-left: 56px;
}
.btn_ani:hover {
background: #ffffff;
color: #99745c;
opacity: 1;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.5s;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
It can be done with CSS. You could simply move the :hover state to the parent .box and the target the descendants like: .box:hover .btn_ani.
In this case elements can have their own transition value.
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
/* different transition from the parent */
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.7s;
position: absolute;
margin-left: 56px;
}
.box:hover .btn_ani {
background: #ffffff;
color: #99745c;
opacity: 1;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
If you would like to try some jQuery, you could use a solution such as this:
$('.box').hover(function(){
$('.btn_ani').toggleClass('margin');
});
With the css:
.margin{
margin-top:80px;
}
and here is an example!
I'm looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.
MY JS FIDDLE HERE!
I've got this:
<div class="box expanded">
Some text
</div>
My CSS:
.expanded {
height: 179px;
font-size: 20px;
padding-top: 130px;
position: relative;
z-index: 1000;
background-color: red;
transition: transform 0.4s;
}
.expanded:after {
content: '';
position: absolute;
height: 80px;
width: 100%;
bottom: 0;
left: 0;
z-index: -999;
background-color: #000;
transform: translateY(0%);
transition: transform 0.4s, opacity 0.1s 0.3s;
}
Add overflow:hidden to the parent, .box, and set the initial position of the pseudo element to top:100%. On :hover of the pseudo element, transition it to top:0 and add some transition properties to make it smooth.
UPDATED EXAMPLE HERE
.box {
overflow:hidden;
}
.expanded:after {
content:'';
position: absolute;
height: 80px;
width: 100%;
top:100%;
left:0;
z-index: -999;
background-color: #000;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
.expanded:hover:after {
top:0;
}
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
Put this in .expanded class