I have the following CSS:
.contact{
padding:1rem;
background:#023B6C;
padding:1rem;
position:fixed;
right:-20px;
top:27%;
z-index:99;
border-radius:5px 5px 0 0;
border:2px solid #fff;
transform:rotate(-90deg);
transition:all .5 ease;
}
.contact a{
font-size:1.2rem;
color:#fff;
transition:all .5 ease;
}
.contact a:hover{
color:#E5E5E5;
font-size:1.25rem;
}
.contact:hover{
padding:1.2rem;
}
that controls the following HTML:
<div class="contact">
Contact
</div>
What this is doing is upon hovering over the div the div slightly expands and the text also expands. However, if a person doesn't hover directly over the text the text doesn't change, just the div.
How do I modify the code so the link inside the divs changes when the div is hovered but the text is not? I tried putting all of the code inside the .contact:hover but that didn't work as the link was styled by the default styles of my css.
Here is a jsFiddle of my code.
Think about it from right to left...
Any, a - inside of .content that is on hover...
so
(from right to left)
.contact:hover a {
}
But, I would make the whole thing an anchor. make it block and style the whole thing on hover.
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
You can visit the site here (click "portfolio" to get to the relevant part for this question).
I am trying to set up a title to appear when an image is hovered over. I formatted the images as well as the text to appear upon hovering. I set the div's visibility to hidden and used the hover tag to make it visible, but it refuses to reappear upon hovering. How can I make the div actually appear upon hovering?
Here's my HTML (just the first li to keep the post short)
<li>
<a href="#openModal1">
<div class="imgwrap">
<img src="portfolio_images/poster.png">
<div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
</div>
</a>
</li>
And the CSS
.imgwrap {
height:150px; width:150px;
}
.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}
.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}
.textwrap:hover {
visibility: visible;
}
Try changing the visibility when you hover over the container. You can do something like:
.imgwrap:hover .textwrap {
visibility: visible;
}
You are simply using the hovering over the imgwrap class to control the properties of textwrap. Essentially you are just using the hovering over the parent but then specifying a child; in this case, textwrap. Since you can't hover over an element that is hidden, we hover over it's parent, which is the area over which we want to be able to hover anyway.
Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.
I have a large graphic that I am trying to pull up behind my content. Currently, instead of pulling up behind my content, the graphic is just placed below it, which leaves a big gap between the bottom of the content and the footer. The large graphic in reference is the watercolor bird at the bottom. The content is the resume text. Keep in mind that that resume text is an accordion link that expands. I need help closing up this space, please.
http://imip.rvadv.com/index3.html
CSS:
#bottom-graphic-container {
margin:0;
padding:0;
background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
height:313px;
}
.wrapper{
max-width:920px;
margin:25px auto 0 auto;
padding:0;
width:100%;
z-index:1;
}
.st-accordion ul li.st-open > a{
/*margin-top:70px;*/
}
.st-open:last-child .st-content {
padding-bottom: 0;
}
.st-content{
padding: 5px 0px 100px 0px;
}
.st-content p {
font-size: 14px;
font-family: Georgia, serif;
font-style: normal;
line-height:22px;
padding: 0px 4px 15px 4px;
}
.st-accordion{
width:100%;
min-width:270px;
margin:0 auto;
}
.st-accordion ul li{
overflow: hidden;
padding:0 30px;
}
.st-accordion ul li:first-child{
overflow:visible;
list-style-type:none;
}
.st-accordion ul li:last-child{
}
.st-accordion ul li > a{
font-family: 'Trocchi', serif;
text-shadow: 1px 1px 1px #fff;
color:#688993;
line-height:44px;
font-size: 36px;
display: block;
text-decoration:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color:#18232e;
}
HTML:
<div class="wrapper">
<!-- <div class="chirp">chirp</div>-->
<div id="st-accordion" class="st-accordion">
<ul>
<li>
Chirp. Would you like to know about me?<h2>Read the official birdwatcher's guide.</h2>
<div class="st-content"><p>content goes here</p>
</div>
</li>
<li>
A bird's eye view of my endeavors<h2>and other flights of fancy, also known as my portfolio.</h2>
<div class="st-content">
<p>Portfolio Goes Here.</p>
</div>
</li>
<li>
My migration pattern<h2> and other common facts, otherwise known as my resume.</h2>
<div class="st-content"><p>content goes here</p>
</ul>
</div>
</div>
</div>
<!--bottom graphics-->
<div id="bottom-graphic-container"></div>
<!--Footer-->
<div id="footer-container">
<div id="footer-content-container">
<div id="footer-copy">Tiffani Hollis, Creative Professional (404)931.6057 thollis#i-make-it-pretty.com</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
I replicated your website locally and was able to fix this for you.
Reference: jsFiddle 1 (Note: Due to #font-face Same Domain Orgin Rules, those font's aren't shown.)
The solution was to change the HTML order for the Corner Bird so that this Div with ID name #bottom-graphic-container will contain the Accordion content (with class name .wrapper ).
Then, several modifications/configurations were done to the CSS to allow for proper operation. Notably, I set the Footer and the Corner Bird Div's to position:fixed; so it always clings to the bottom. When there's Link's or Resume Text behind the Footer, the expected browser scrollbar comes into play.
To clarify further: The Corner Bird is the "back-layer", the Accordion is the "middle-layer", and the Footer is the "front-layer". They all work in harmony now. :-D
Since the Corner Bird is now behind the Accordion div, that bg-background.jpg was clipping into the Header Image. The solution was to convert this image to PNG with Transparency. I used open source irfanview for that. I've included that PNG here as well, or you can make your own.
When all is said and done, your website will work as you expect it to. Tested in IE8, Firefox, and Chrome with no issues. (Side note: In IE8 I did not test #font-face fonts).
Here's a screenshot of your webpage with the browsers window adjusted to a small size:
The modified HTML:
<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">
<!--Footer-->
<div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
<div id="footer-content-container">
<div id="footer-copy">
<!-- Removed personal info -->
</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
</div> <!--Closing tag for bottom graphics-->
The modified CSS:
.wrapper{
width: 920px;
max-width:920px;
margin: 0 auto;
padding: 0;
margin-bottom: 65px; /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
position: relative; /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
z-index: 1; /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}
#bottom-graphic-container {
width:100%;
height:313px;
background-image:url(../images/bg-bottomTrans.png); /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
background-repeat: no-repeat;
position: fixed;
bottom: 94px; /* The height used here is the height of 'bg-footer.png' image. */
/* border: 1px solid red; */ /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}
#footer-container {
width:100%;
height:94px;
background-image:url(../images/bg-footer.png);
background-repeat: repeat-x;
position: fixed;
bottom:0;
z-index: 10; /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}
#resume-container ul li{
list-style-type:disc;
list-style-position:inside;
line-height:20px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
padding-left:20px;
margin-right:80px;
} /* this closing '}' was missing */
The modified PNG with transparency background image file:
bg-bottomTrans.png
Final Update: As the above jsFiddle is one method to satisfy this Question, here is a complete different method at the request of the OP.
Reference: jsFiddle 2
The Bottom Graphic and Footer are part of the last Accordion item (Resume). Note moving up items that were at the bottom to be closer to top will create empty space at bottom of webpage for large monitors (To be sure, maximize your browser). To change the distance, adjust the CSS bottom property for the Bottom Graphic and Footer as noted in the CSS.
This is why the first method above has them fixed so no matter the browser height, uniform look is achieved. Note: Font-face has Same Domain Origin Policy rules, hence they don't render in jsFiddle.
To access the jsFiddle Edit Page, remove /show/ from Address Bar.
The HTML and CSS Panels is your code.
I've included comments in the CSS section and the HTML section changes include:
1. Div id="masthead-container" now contains the other items.
2. The other items are: class="wrapper", id="bottom-graphic-container" and id="footer-container
3. When viewing the HTML in the jsFiddle, the RED tags seen are due to previous markup errors. Once your webpage is composed, visit W3C Online Validation to see where the error occurs. Example: you have an unclosed or extra div tag that shouldn't be there.
I see two possible modification to improve the visual/remove the space:
Change the wrapper class to remove the bottom margin:
.wrapper {
margin: 25px auto -50px;
max-width: 920px;
padding: 0;
width: 100%;
z-index: 1;
}
The line that's changed is the margin one. I put -50px at the bottom margin. You can play with that value (make it lower or higher) to change the space between your wrapper and the footer.
You might want to add a rule to the last accordion child as well. Because he doesn't need the extra bottom padding that separate him from its siblings.
.st-open:last-child .st-content {
padding-bottom: 0;
}
This one target the .st-content div that have .st-open as parent , but only if the block with the .st-parent is the last-child of its parent. Hence, it works only for the bottom part of your accordion, setting a bottom padding of 0 instead of 100px.