Im trying to achieve a heading effect link on bbc: http://www.bbc.co.uk/
scroll down to most popular/whats on/explore
I'm after an effect where the heading is with text on the left and the arrow on the right.
and on hover both change color.
how can it be done so the heading fills the container and has the behaviour described?
thanks
You can use floats to make the arrow stick to the right side by floating it to the right
.arrow { float:right; }
For the color change you will need to change the contained elements when the mouse is hovered on the container
.container:hover .title, .container:hover .arrow { color:green; }
You can check my example here.
Update
Working with hyperlinks does not make it any different. All you have to do is wrap the two containers inside a hyperlink and then apply changes to the hyperlink like
http://jsfiddle.net/pZtGw/3/
The new html markup would look similar to this
<div class="container">
<a href="your_link_here">
<div class="title"> This is a title </div>
<div class="arrow"> > </div>
</a>
</div>
And instead of applying the color change to the two contained elements, we change the hyperlinks color property through our CSS flie
.container:hover a { color:green; }
http://jsfiddle.net/2yYyL/1/ here is an example on jsfiddle
what you want to do is add a sudo class of :hover on the wrapper and change the color of the text then have a have a sudo class of :hover on the parent element of a span like so
div:hover span{ background-image:url();}
so when you hover over the parent element it changes the background image of the child element
Related
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
I have a primary image with a secondoary image of an arrow on top, where the arrow is inserted by using a pseudo after-element.
Now I would like to change the opacity of the primary image when hovering over it. This works fine, until someone hovers the arrow image on top - then it doesn't. How can I place a hover style on the secondary arrow image, which changes opacity of the primary image?
Thanks!
Try applying this css to your pseudo after-element:
pointer-events:none
You can add a wrapper, and to make hover for it, like this:
<div class='wrap'>
<div class='img'></div>
</div>
And, add style like this:
.wrap:hover + .img {
}
I need to place the first div over the below div.First div contains a png image and second div contains a background texture.
The problem is the second div is in footer and that is common for other pages also.And that was in seperate php file and was included. So I can't able to edit the second div.
How can I achieve this by only styling the first div?
<div style="">
<img src="sample.png">
</div>
<div style="background-image: url('bg.jpg');">
</div>
below div is in another php file.
If you want to overlap two html element then you have to use position absolute in css you can write css something like this
.firstdiv
{
position :absolute;
top: 20px; /* as per your design you can change it */
}
Jsfiddle
Im very new to HTML and CSS and my weakest points are positioning things.
1)Each picture has its respective green button but my question is how do i put these pictures next to each other instead of on top of each other?
2) how would I code it so that if I hovered over the picture, the corresponding button would still change color up and allow me to click the picture to go to the link?
HTML
<!DOCTYPE html>
<div id="chewning">
<img src="http://scontent-b.cdninstagram.com/hphotos-xap1/t51.2885-15/10518156_366963580136787_506416400_a.jpg" </img>
<a href="https://www.youtube.com/user/maxxchewning">
<div id="EFGREEN">
</div>
</a>
<div id="CG">
<img src="http://cdn.shopify.com/s/files/1/0232/0959/products/575757_10152033748519359_1620549997_n_2.jpg?v=1398666646"></img>
</div>
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<div id="CGGreen">
</div></a>
</html>
CSS
#chewning {
display:inline-block;
margin-right:1000px;
margin-top:-40;
}
#EFGREEN {
background-color:green;
width:306px;
height:100px;
display:block;
}
#EFGREEN:hover{
background-color:red;
}
a:{
display:block;
}
#CG{
float:right;
}
#CGGreen{
background-color:green;
width:414px;
height:500px;
}
#CGGreen:hover{
background-color:red;
}
As already mentioned in some comments, the markup and CSS of your demo
could be improved and there are plenty of online resources (won't recommend
any specific).
But as you have 2 specific questions - how to display both images next to
each other and how to change the link in a way that also the image is linked and the button is displayed in hover state (changes the background color) when the image is hovered - I'd just like to give an answer as well as maybe providing some information on how to improve your code.
In this adjusted Fiddle I've kept but commented out your CSS and added the following new CSS instead:
.button {
background-color:green;
width:100%;
height:100px;
}
.item {
float:left;
}
.item:hover .button {
background-color:red;
}
To display both images next to each other, I've wrapped both items (image and button)
in a div with the class item. These items float left, so they're displayed
next to each other. I've added the class button to both buttons so it's not
necessary to repeat styles based on the buttons' ids.
You've set the width of both buttons to the different widths of the images which
can be handled in a more dynamic approach by just setting the width of the
buttons to 100% - based on the image width the surrounding item container
will have the width of the image, and the div with the class button automatically
has the same width (100% of the container).
I've moved the anchor tags that previously only wrapped the button div to wrap the
whole divs (which contain the image and the button) contained in each item, so the whole content is linked.
Adding .item:hover .button { background-color:red}, the buttons will be displayed
in red when hovering an item container.
Note that there are different ways to display content next to each other - just
to mention one of them using display:inline-block - Fiddle - instead of floats. As
you'll notice, then also the buttons are displayed aligned next to each other.
It depends on the required layout (and maybe also on one's personal preferences)
which to choose.
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}