Hello my problem is simple I have multiple li element with and image and a text inside but the problem is that when I apply this code for zoom it on hover:
.thumb > li a {
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: #E5E6E9 #DFE0E4 #D0D1D5;
display: block;
margin: 2px;
position: relative;
transition: all 0.3s ease 0s;
}
.thumb > li a:hover {
border-color: #00C0FF;
box-shadow: 0px 0px 7px #00C0FF;
text-decoration: none;
outline: medium none;
transition: all 0.3s ease 0s;
transform: scale(1.1);
}
It cover the previous li element so some border will not display correctly so I'm wondering if is possible to correct it.
Thanks.
Add this to .thumb>li a:hover (the background is for becoming opaque):
.thumb > li a:hover{
background-color: white;
z-index: 1;
}
fiddle here.
Related
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
I'm trying to create a hover where the button changes color while the text changes to a different color, specifically in Squarespace. I'd like the button to turn white and the text to turn black. The button changes, but the text will not change.
Here's my css:
li {
width: 190px;
padding: 8px;
background: transparent;
border: 3px solid #ffffff;
border-radius: 50px;
text-align: center;
transition: all 0.3s ease-in-out;
}
li {
vertical-align: absolute;
margin: 5px;
}
li:hover {
background: #ffffff;
transition: all 0.3s ease-in-out;
color: #000000;
}
CSS Hover Code
So I'm implementing a drop-down menu in CSS to my website,
this function is on the navigation bar.
As I struggled with this, my friend did some code for me, but I can't find in the CSS code which produces the drop down effect.
It's fully working and operational, just need help finding the drop-down attributes so I can learn from it.
Thanks.
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #000000;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
text-decoration: none;
}
ul li:hover {
background: #6d1022;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-decoration: none;
}
ul li ul li {
background: #000000;
display: block;
color: #fff;
}
ul li ul li:hover { background: #6d1022; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
The crucial part of a HTML/CSS drop down is nested lists. The main items are in the top level list ul li, sub menus are part of ul elements within the top level ul li, by default these are hidden-
SO you have the structure:
ul
-li
--ul <-- hidden with display:none
---li <-- hidden due to parent ul being hidden
You can see this in effect in your CSS here:
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none; /* <---- here */
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-decoration: none;
}
When the top level ul li item is hovered on, you want the child list to be shown, you can see this here:
ul li:hover ul {
display: block; /* <--- here */
opacity: 1;
visibility: visible;
}
Which performs the following:
ul
-li:hover <-- trigger applying display:block to child ul
--ul <-- shown with display:block
---li <-- shown due to parent ul being shown
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Says that on mouse hover over the unordered list,list items will become visible...
I am creating a website for a client and would like to remove the blue "shadow" on the dropdown menus. i think the code i must edit is as follows:
.main_nav ul.sub-menu {
position: absolute;
top: 65px;
width: auto;
min-width: 150px;
z-index: 9999;
list-style-type: none;
float: right;
left: 0;
display: none;
visibility: hidden;
height: 0;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
can you please assist me in this matter.
http://makeskate.wpengine.com/
Just delete this from your css codes :
.main_nav li:hover a, .link-active, .current-menu-item a {
box-shadow: 0px -5px 0px rgba(255, 255, 255, 0.3) inset, 0px 2px 0px rgba(255, 255, 255, 0.2) inset;
}
And delete background from here :
.skill_set, .soft_skill span, .submit_button, .main_nav li:hover a, .link-active, .current-menu-item a, .main_nav ul.sub-menu, .button, #submit, .wpcf7-submit, .post .date, .tags a, .entry-footer li a:hover, .post-content .wp-caption, .comment .comment-meta .comment-reply-link:hover, #searchsubmit {
background: none repeat scroll 0% 0% #34799E;
}
Add box-shadow:none to your .main_nav li:hover a styles
.main_nav li:hover a, .link-active, .current-menu-item a{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
If you want to remove the blue background color, then use the below style
.main_nav li:hover a, .link-active, .current-menu-item a{
background-color: rgba(255,255,255,0); // to remove the blue background and add transparent background
}
I want to reduce the size of the drop down menus to the same as the buttons. Adjusting either the padding or margin would move the items out of place and close themselves when I try to hover over it. I'd like to know what is causing this. Here's the Fiddle
Any help would be great.
CSS:
.sort ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
float:right;
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FF5C00 url(http://i1350.photobucket.com/albums/p769/Stonecold_Stone/Games/SoManySales/Joint%20Supplement/alert-overlay_zpsf561d19b.png) repeat-x;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
color:#fff;
}
.sort ul li:hover {
background: #555;
color: #fff;
}
.sort ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.sort ul li ul li {
background: #FFDFDF;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
z-index:9999;
}
.sort ul li ul li:hover { background: #666; }
.sort ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.button, ul{ padding-left: 15px;}
.button {
list-style: none; cursor: pointer;
float: left; margin: 10px 10px;
background-color: #039fd3; color: #fff;
padding: 5px 10px;
font-size: 13px;
border-radius: 3px;
-webkit-transition:background-color 0.3s ease-in;
-moz-transition:background-color 0.3s ease-in;
-o-transition:background-color 0.3s ease-in;
transition:background-color 0.3s ease-in;
}
HTML:
<div class="sort"><ul>
<li>
Sort AXXX
<ul>
<li><a href='#'>SXXXX</a></li>
<li><a href='%#%'>AXXXx</a></li>
</ul>
</li>
<li>Sort BXXX
<ul>
<li><a href='%#%'>CXXXX</a></li>
</ul>
</li>
<li>Sort C
<ul>
<li><a href='%#%'>WSXXXX</a></li>
<li><a href='%#%'>SXXXX</a></li>
</ul>
</li>
</ul></div>
Following the op coding style, in order to adjust the width of the dropdown it is required to set a width value for the list items under .sort div. Also added paddings similar to the ones set to the blue buttons on the left.
.sort ul li{
width:70px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
Also it is necesary to adjust the top relative position of the sub menu to always be below the the main menu,
.sort ul li ul{
top:100%;
}
To adjust the distance from the top of the menu to be the same as with the buttons, it is possible to tweak the top relative distance of the menu to achieve it.
The ul element containing the buttons is a block element and the list items within it are floated with a margin-top of 10px and padding-top of 5px so a total of 15px from the top. The ul element within div.sort is floated to the right and has a padding-top of 5px so with margin-top 10px (i.e. 15-5) should be aligned with the buttons.
.sort > ul{
margin-top:10px;
}
http://jsfiddle.net/fLSyE/
First is, if you want your buttons and drop down menu to have the same size, just set the width to be the same. Here is an example(from your code):
.sort ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 100px; /* set width of drop down menu to 100px */
-webkit-box-shadow: none;
/* SOME OTHER CODES FOLLOW */
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
width: 100px; /* also set the width of the menus to 100px */
position: relative;
padding: 15px 20px;
}
Hope it helps!