I'm using a png sprite with a transparent background as button art in a list.
.single-pdsh #navlist li {
margin: 0;
padding: 0;
list-style: none;
opacity: .15;
transition: 0.3s;
}
.single-pdsh #navlist li:hover,
.single-pdsh #navlist li:active,
.single-pdsh #navlist li:visited {
opacity: .25;
}
.single-pdsh #navlist li, .single-pdsh #navlist a {
height: 75px;
width: 75px;
display: block;
}
.single-pdsh li#prev {
position: absolute;
top: 50%;
left: 5px;
background: url('https://kidconqueror.com/wp-content/themes/twentytwentyone-child/images/nav_sprite_800x800.png');
background-size: 300px 300px;
background-position: -10px 0px;
background-repeat: no-repeat;
}
Button works as expected. Almost. Hover triggers opacity transition as designed.
However, after clicking the button, before page transition, the background of the list item appears. I've exaggerated it a little here for clarity.
Why is this happening?
Screenshot of glitch:
Sprite button art png:
Oddly, I switched from a Wordpress child theme based on Twenty Twenty One to one based on WP Bootstrap Starter and the weird effect went away. No clue why except that maybe bootstrap represents a more modern code base?
Related
see that the background is not repeated for the long text.
The red/ maroon color is an image sliced as a whole (no middle portion sliced) or in other word its a single image.
Say that I sliced the middle part so that it can repeat as the menu grows longer, how can I include it in the css?
This is how I include the single image currently.
ul a:hover{
background-image: url("<?php echo get_template_directory_uri()?>/images/slices/slanted-hover.gif");
color:#fff;
background-repeat: no-repeat;
min-width: 50px;
}
Expected result like below, where the whole word is covered by the background image:
If still not clear, please see here:
All I want to do is,
I want the black rectangle to be repeated. Ideally when I slice it's going to be there images. So how do I use it as a background for menu (putting together all there images) and repeat the middle (black rectangle) repeat?
You do not actually need to use any image for that purpose. A simply trick using just CSS 2D transform and pseudo-elements will work fine, and these two specs are widely supported across modern browsers in use.
The only modification you need for your markup is to wrap your link text in an additional <span> element, for proper z-index stacking to work.
The only caveat with this trick is that when you apply a skew, part of the skewed pseudo-element will protrude out of the bounding box of the parent element. This protrusion is dependent on the skew angle and the height of the link, but can be accounted for by setting left and right paddings on the <ul> element to ensure they don't overflow.
ul {
background-color: #eee;
list-style: none;
padding: 0 1.5rem; /* Spacing to account for skewed edges protruding out of box */
margin: 0;
overflow: hidden;
}
ul li a {
color: #000;
float: left;
padding: .75rem 1.5rem;
position: relative;
transition: all .25s ease-in-out;
}
ul li a span {
position: relative;
}
ul li a::before {
background-color: #b13131;
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: skew(-10deg);
transition: all .25s ease-in-out;
opacity: 0;
}
ul li a:hover {
color: #fff;
}
ul li a:hover::before {
opacity: 1;
}
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2 that is a little bit too long</span></li>
<li><span>Item 3</span></li>
</ul>
Pure CSS solution, should work in all major browsers including IE >= 9.
ul a {
position: relative;
}
ul a:hover::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: -.8em;
bottom: 0;
left: -.8em;
background-color: red;
transform: skewX(-15deg);
}
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle
I have my css prefixed but my transitions only work in safari. I'm testing in the latest versions of Opera, Chrome and Firefox. The image does move on hover, the different colour icon appears, but no transition effect like I have in Safari.
Here is my scss:
li {
height: em(36);
width: em(28);
display: inline-block;
}
li:first-child {
background-image: url(social.svg);
background-position: 84px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 84px -36px;
}
}
li:nth-child(2) {
background-image: url(social.svg);
background-position: 56px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 56px -36px;
}
}
li:nth-child(3) {
background-image: url(social.svg);
background-position: 28px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 28px -36px;
}
}
I really have no ideas why its not working. Any help would be great.
Thanks in advance,
Alex
The valid values for transition-property are:
transition-property: none|all|property;
Try using all instead of transition.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I wish to do something similar to this,
http://timheuer.com/blog/archives.aspx
i need to create a interactive circular links using CSS.
There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The simplest example is;
1 Image Background
#link1 {
background-image: url('/images/button1-trans.png')
}
#link2 {
background-image: url('/images/button2-trans.png')
}
#link1:hover {
background-image: url('/images/button1.png')
}
#link2:hover {
background-image: url('/images/button2.png')
}
1b Image Spriting
Using multiple images like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);
Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;
#links a {
background-image:url('/images/allButtons.png')
background-position: 0px 0px; /* sets the row for all normal links */
width: 64px;
height: 64px; /* bounding box for the image */
}
#links #link1 {
background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
background-position: -64px -64px; /* second image, second row */
}
Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.
However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?
2 Pure CSS
You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.
3 Icon Fonts
☺☻☼☽☾☿
This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?
Zoom in on the icons above, and Here's a fiddle
You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.
EXPLANATION
The page You show us use a images sprit with icon of all menu item, event with border. My example show how do this with simple css. You can also use images sprit but including only icon.
HTML CODE:
<ul>
<li><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
<li><span>About</span></li>
<li><span>Projects</span></li>
</ul>
CSS CODE
html, body {
background: #369BD7;
font-family: tahoma;
font-size: 12px;
}
a {
color: #fff;
}
ul {
clear:both;
margin: 0;
padding: 0;
}
ul li {
display:block;
position: relative;
float: left;
height: 80px;
width: 80px;
padding: 0;
margin-left: 10px;
list-style: none;
text-align: center;
white-space: nowrap;
}
ul li:first-child {
margin: 0;
}
ul li a {
display:block;
margin: 10px auto;
height: 40px;
width: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 4px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}
ul li a:hover {
background-color: #fff;
}
ul li a span {
display: block;
position: absolute;
bottom: 0;
left:0;
width: 100%;
text-align: center;
z-index: 1;
}
BORDER RADIUS BROWSER SUPPORT
http://caniuse.com/#search=border-radius
DEMO
http://jsfiddle.net/bartekbielawa/fgPf8/6/
The trick is to have the border-radius be half of the height and width. Then just use a gif or png for IE fallback.
.round-button {
width:100px;
height:100px;
border-radius:50px; /* be sure to add all the browser prefix versions */
}