I have this grid here:
what i want to have (image example)
When I hoverig one of them, all 4 parts should get hidden and the background image with the right color should appear.
How can I get this happen?
thx & best regards
For this you would have to use JavaScript, so what I am thinking is that you could create <div>'s for all the backgrounds and when you hover over one of them in JavaScript you could do the show hide to the ones you want.
And just for future note's you should include code and more details and check the web or try to solve it before you even ask on Stack Overflow.
Related
Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
Text overflowing from background image
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y instead of repeat. Similar for horizontal/repeat-x. Another way would be to use background-size:cover.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
Basically, I am using Iframes on my website, and I have a 200px bar on the left which I am using for navigation. There are several links here, of which when I hover over them the text and background colors invert (so you can see it, basically).
What I want is that so the background color will span the whole of the navigation frame - currently, it is only a small square around the box. I want it to look like this at any resolution and so far... my attempts have been useless.
I am using HTML and CSS, and would preferably like a solution using those languages.
Thank you for your help.
I'm fairly sure this can't be done without the use of JavaScript. Consider the code at
http://jsfiddle.net/ZPzBL/
the a:hover only allows the style of the link to be changed.
If you want the whole div to change colour (which, if I've read your question correctly, is what you want), then using purely html, you'd need to have a style with .wrapper:hover, such as this:
http://jsfiddle.net/ZPzBL/1/,
but this means that the whole div changes colour as soon as you hover over it.
Essentially, CSS only lets you change the style of the element being hovered over at that time. Any other changes to the DOM need to be handled by JavaScript. You'll probably want to have a look at http://api.jquery.com/hover/
I have a Div named splash which is 473px wide and 139px high. It has a background image applied to it. Within the Div I have 3 other Divs.
I want the background image of the splash container div to fade in and out through different pictures.
Is there any way to achieve this using CSS3?
You can see the splash div on http://blackburnseo.com/ensor/
CSS3 has a property/feature called 'transitions' which may be able to achieve the affect you're looking for, sans JS.
After a quick google, I believe this may be a good spot to get you started.
http://css3.bradshawenterprises.com/transitions/
I don't know how many browsers have implemented this feature, though; the other problem is that not every property supports transitions (you would probably be looking at background-position)
It can be done using transitions, but it wont change automatically.
User must trigger transition somehow (:hover, :focus, etc).
Check the example here: http://jsfiddle.net/seler/zZCyf/