I have a problem when try to make transition effect on fixed element from right to left. When I hover, all li elements transition too.
https://jsfiddle.net/k0fow2jb/
You got it fixed here
https://jsfiddle.net/k0fow2jb/3/
the important thing was to add margin-left:auto to your .side-menu li
.side-menu {
z-index: 999;
overflow: hidden;
position: fixed;
top: 25%;
right: 0;
}
.side-menu li{
cursor: pointer;
display: block;
list-style-type: none;
width: 40px;
height: 40px;
overflow: hidden;
position: relative;
transition: width 0.5s;
margin-left:auto;
}
.side-menu li a{
position: relative;
text-decoration: none;
color: #FFFFFF;
}
.ask-questions {
background: #19b5fe;
}
.ask-questions:hover{
width: 150px;
}
.facebook-link {
background: #3b5998;
}
.side-menu li:hover{
width:150px;
}
.support-box{
background: #dd4b39;
}
Related
I'm working on a menu with a sliding underline with target, I am really close but I can't figure to make it responsive. The "underline" doesn't stick at the center of the link when resizing the window.
Here is a JSFiddle
nav {
margin-top:30px;
font-size: 15pt;
background: #FFF;
position: relative;
width: 100%;
height:50px;
}
nav a {
text-align:center;
background: #FFF;
display: block;
float: left;
padding: 2% 0;
width: 33.33%;
text-decoration: none;
transition: .4s;
color: red;
}
.effect {
position: absolute;
left: 22.5%;
transition: 0.4s ease-in-out;
}
nav a:nth-child(1):target ~ .effect {
left: 22.5%;
/* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
left: 56%;
/* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
left: 90%;
/* the middle of the third <a> */
}
.ph-line-nav .effect {
width: 34px;
height: 2px;
bottom: 5px;
background: blue;
margin-left:-50px;
}
Each element is 33.33% wide. Divide that in half, that's 16.66%, so that will be the center of the element. Using 16.66% as the default left value will put the left edge of .effect in the center of the first element. To center the .effect in the true center, move it back 50% of it's own with with translateX().
So the first element's left should be 16.66%.
The second element will be 49.99% (99.99 / 2)
The third element will be 83.33% (99.99 - 16.6 or 66.66 + 16.66)
nav {
margin-top:30px;
font-size: 15pt;
background: #FFF;
position: relative;
height:50px;
display: flex;
}
nav a {
text-align:center;
background: #FFF;
display: block;
padding: 2% 0;
flex-basis: 33.33%;
text-decoration: none;
transition: .4s;
color: red;
}
.effect {
position: absolute;
left: 16.66%;
transition: 0.4s ease-in-out;
transform: translateX(-50%);
}
nav a:nth-child(1):target ~ .effect {
left: 16.66%;
/* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
left: 49.99%;
/* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
left: 83.33%;
/* the middle of the third <a> */
}
.ph-line-nav .effect {
width: 34px;
height: 2px;
bottom: 5px;
background: blue;
}
<nav class="ph-line-nav">
AA
AA
AA
<div class="effect"></div>
</nav>
What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}
When using
filter:alpha(opacity=60);
on a div containing an unordered list which has :hover on the list items, IE8 will only activate the :hover event on the first item that is hovered over.
Moving up/down to another list item will no longer activate the :hover event. This works in firefox however.
There is an example at http://www.ithinkimlost.com/paul/ese/test.html
Any ideas what would be causing this?
Try this syntax:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter: alpha(opacity=60);
opacity: 0.60;
Some ideas that might fix it:
reset the opacity on the :hover
set an height on the lis
add a position and remove the clear
move #homeOptions above the :hover in the code
try this sheet:
#homeContent {
margin-left: 15px;
}
#homeMainPic {
background:url(main_pic.jpg) no-repeat;
height: 216px;
}
#homeOptions {
height: 216px;
width: 300px;
}
#homeOptions ul {
height: 216px;
overflow: hidden;
padding: 0;
margin: 0;
}
#homeOptions li {
display: block;
padding: 0 0 0 30px;
margin: 0;
vertical-align: middle;
text-align: left;
zoom:1;
background-color:#009;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter:alpha(opacity=60);
opacity: 0.60;
}
/* it is needed - don't ask why */
#homeOptions li:hover {
background-color:#009;
}
#homeOptions a {
display: block;
width: 100%;
vertical-align: middle;
line-height: 72px;
height: 72px;
color: #fff;
text-decoration: none;
font-size: 1.1em;
border-bottom: 1px dashed white;
display: list-item;
list-style-type: disc;
list-style-position: inside;
padding-left: 30px;
}
#homeOptions a:hover {
background-color: #000;
}
Change this:
#homeOptions ul li img {
vertical-align:middle;
margin-right: 20px;
filter:alpha(opacity=60);
opacity: 0.60;
}
#homeOptions {
background-color:#009;
height: 216px;
width: 300px;
float: left;
}