So I have a specific code for a hover effect on buttons that lead to certain categories on a wiki I raised. You can see those buttons here. (You can click on 'edit' to see the HTML on that page.)
Here's the code I'm using for this
.helpmodule
img:hover {
-moz-opacity: .8;
-khtml-opacity: .8;
background-image: url(vignette3.wikia.nocookie.net/zombieescape/images/3/32/…);
background-position: center;
opacity: .8;
width: 200px;
height: 200px;
}
Basically, all the code works for everything I need except for one little thing: The background-image, which you can find here. This image needs to be put at the center of those 9 buttons. The problem is that the class I'm using, of course, puts all those functions to all images used.
I want to find a way to get that specific image at the center of the buttons, without it moving away the buttons etc... so like a background image (that potentially can get behind the buttons if necessary).
Ok, I managed to get the exact result I wanted. What you need to do is first create an ID that has the background image, in this case the code is:
#buttons-navigator-body {
background-image: url(insert your url here);
background-repeat: no-repeat, no-repeat;
background-position: center;
}
You now add a <div id="buttons-navigator-body"></div>
and then, you can create your entire setup of elements within this ID. It will now automatically center the image in the middle of the bounding box of all elements together. All these are driven by one class that hovers images as you go over them with the following code:
.buttons-navigator-hover img:hover {
-moz-opacity: .8;
-khtml-opacity: .8;
opacity: .8;
width: 200px;
height: 200px;
}
The result can be seen here: http://zombieescape.wikia.com/wiki/Zombie_Escape_Wiki
Note that this might seem very logical or already answered in thousand posts, but in my case it was the purpose to have a background image that center itself exactly at the middle of a specific setup of elements to work along with multiple functional hover buttons, as opposed to just have a tiling image.
Related
I was wondering if it is possible to : when hovering over a toggle menu (has ID 9) in Wordpress to display an hidden image (Lets say has ID 10). It looks like this now https://wortelboeryachting.com/wp-content/uploads/2020/04/Screenshot-2020-04-29-at-20.29.36.png. I want to be able to hover over the toggle menu on the left and make an image, currently hidden behind image on the right, to appear. If possible in CSS addition code because I am not very familiar with JavaScript.
Thanks for the help!
If you only want to use CSS, you can put the images into pseudo-elements of the menu items. Only to show you the concept:
.myMenuItems::after {
width: 100px;
height: 100px;
background-image: url('yourimagepath');
background-size: cover;
opacity: 0;
}
#myMenuItem:hover::after {
opacity: 1;
}
Of course you can use a class and it may better to position the image absolute.
If you want to overlay as you said, you can make this happen with the css property "z-index", instead of "opacity".
I am building a Wordpress site. On the homepage, I am trying to position a ball without affecting the other divs under the slider, which the theme maker has given the same class name. What I want to do is make the ball small and place under the writing. The theme does not allow me to assign a class to that image. This is what I've tried but it affects the other images in that row. Could someone help me please? I am thinking I may be able to use first child but not sure. Thanks!
.cg-strip .cg-strip-bg {
background-size: contain !important;
background-position-y: 90%;
background-size: 50%;
}
Use:
<div class="cg-strip-bg " style="background:url(http://adasportsandrackets.com/wordpress/wp-content/uploads/2014/10/ada-460-mole150x146hp.png) no-repeat center bottom / 80%!important; "></div>
Note!! don't use: background-image: but background:
with all this stuff:
url(blabla.png) no-repeat center bottom / 80%!important
80% is the size, might be a bit too much below your text, but you're free to fix till you get the desired result.
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.
Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.
Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)