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".
Related
Really new to CSS here...
I'm trying to resize with CSS the background image to fit the header.
So far I've tried wrapping the image itself with a div class to try to manipulate it... to no avail!
HTML:
{block:ShowHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:ShowHeaderImage}
CSS:
.header-image {
position: absolute;
background-size: contain;
background-position: -1;
opacity: .05;
background-image: url({HeaderImage});
}
There are other elements in the header, hence the background-position.
I've successfully gotten it to resize by putting the background image in the parent class -- however then the header image is not toggleable via the {block:ShowHeaderImage} function, nor can I change the opacity of JUST the background image as far as I know.
I'm probably making a few mistakes here but the end goal is to have it resizeable and toggling using Tumblr's syntax.
Custom Images
You can check if a custom image has been uploaded, using an if operator:
{block:IfHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:IfHeaderImage}
Custom Text
You can use custom text to provide a value for the opacity:
<meta name="text:Header Opacity" content="0.5"/>
.header-image {
opacity: {text:Header Opacity};
background-image: url({HeaderImage});
}
References
Theme Options - https://www.tumblr.com/docs/en/custom_themes#theme-options
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
Could you please advise on how to create a navigation menu like this one at the bottom?
https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png
I already have the footer div set, I only need the menu itself. I tried and experimeneted but couldn't get it to display exactly as I want. The images would have to be with CSS background so that I can have the image change when the "tab" is active.
Thank you very much in advance!
I don't really see that it is in any way necessary to do this with background-image attribute.
You could just use a normal <img src="pics/my-img.png" /> in the HTML structure of this navigation bar. Setting the alignment to simply nothing on the image will in most cases drop the text on the same container below the picture, but in case of an exception:
#myNavigation img {
display: block;
padding-bottom: 4px;
}
This should help you with what I understood of your question, that you're trying to create a navigation menu with images and text.
There's also a quite simple and nice hover effect possibilities for this, for e.g:
#myNavigation img {
opacity: 0.6;
}
#myNavigation img:hover {
opacity: 1;
}
Good luck!
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code
HTML:
<button><span>3 replies</span></button>
CSS:
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
but when I hover over the button, it twitches very badly
I want mine to be smooth like the music player at this link
When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text
here is part of my player http://djwckd.com/test
The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:
button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}
By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.
As you provided the link is hovering the background images but in your test link you have given background images before to <a> elements, if you want exactly same as link use background-image: url('image1'); to a and background-image: url('image2'); to a:hover.
You can still use positioning the background-images, for this you should have like this.
+--------------+
| | position this background to a
+--------------+
| + Add | position this background to a:hover
+--------------+
Ok! for this make your background 64px width and 32 px height.
then position your background to
a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}
now position your background to
a:hover{background-position: 0% 0%;}
I think I have a solution. The trick was one main thing: setting the width of the text's container. I also used onmouseenter instead of onmouseover for faster text change (my theory that onmouseenter is faster then onmouseover). Here is an example:
var videoplayer = {
text: "<b>Hello World</b>",
author: "(you)"
}
<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>
Just make sure you set the div's width to the width you need. (If you don't want a background, just change the part that says background-color: red to background-color: transparent). One more thing: you have to use a div or other container with display:block set as its default. I suggest using div. Hope this helps!