I have two links (one a text link and one an image link): see image
How would I go about removing the border-bottom style for links that are images but keep them for links that are texts
CSS:
a {
color: #28c3ab;
border-bottom: 1px dotted #28c3ab;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
Add a class to remove the border from some links.
CSS:
a.img {
border: none;
}
HTML:
This has a border
<a class="img" href="#"><img sc="" alt="No border" /></a>
Related
I am trying to create a CSS and HTML drop-down spoiler with open animation.
I started from this
jsfiddle
but margin-top:-100%; doesn't work very well.
margin-top:-100%;
Any solution for smooth animated dropdown container?
You have some error in your CSS. You specified .spoiler > div for show state and only .spoiler for hide state. You should specify the same thing for both and the animation will run smoothly.
.spoilerbutton {
display:block;
margin: 5px 0;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler > div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
padding:5px;
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
By the way You can also animate the max-height instead of margin like this :
.spoilerbutton {
display: block;
margin: 5px 0;
}
.spoiler {
overflow: hidden;
background: #f5f5f5;
}
.spoiler>div {
margin: 5px;
overflow: hidden;
transition: all 1s ease;
}
.spoilerbutton[value="Show"]+.spoiler>div {
max-height: 0;
}
.spoilerbutton[value="Hide"]+.spoiler>div {
max-height: 90px; /*use a big value here*/
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler">
<div>
PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE
</div>
</div>
For smooth animated dropdown container, maybe you can try this :
.spoiler > div {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: margin 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: margin 0.2s ease-in-out;
}
I hope his help you ! Am I answering your question?
I have an image that has an ease-in-out opacity effect when I hover over it. I like the transition effect but not the color of the image when I hover over it. I can't figure out to change the color of my images when I hover over them. background-color: #50b948; does nothing. What am I doing wrong? Here is my CSS and HTML below.
#about img {
margin: 0 auto;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
background: #50b948;
opacity: 0.6;
}
HTML
<div class="row">
<div class="col-md-4">
<a href="bios/teamBioNeil.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chairman & CEO<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioJeff.html">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>President<br>
Senior Wealth Advisor</h3>
</div>
<div class="col-md-4">
<a href="bios/teamBioKim.html">
<div class="imgAbout">
<img src="img/team/kim580x410.jpg" class="img-responsive" alt="Bio">
</div>
</a>
<h1>NAME</h1>
<h3>Chief Operating Officer</h3>
</div>
</div> <!-- end row -->
you want to apply the background color of the div that contains the image - rather than the image itself - then when you reduce the opacity of the image the background will show through.
.imgAbout{
background: #50b948;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
opacity: 0.6;
}
and incidentally - you have too many H1's - semantically you should only have 1 H1 per page (or section) and then the others are H2's eg: page H1 could be "Staff" and then each named below would be H2's or 3's.
I searched in SO and Google but I can't find my answer. I want to do a simple thing, but I don't know how to do it. Let me explain:
I'm making a website in HTML and CSS using Bootstrap. In this website, I put some buttons as glyphicons as you can see here: http://i.imgur.com/Jp59ZO1.png (I can't post images yet).
Here is the code of the key button, rest of them is the same:
<a class="button" target="_blank" href="https://keybase.io/adolphenom">
<i class="fa fa-key fa-lg"></i>
</a>
What I want to do is when I put the cursor on the button, it shows a text at bottom of the button (CSS of the text is a color and a font, it doesn't worry me so much right now).
I tried with two or three tutorials I found but It doesn't fit in my requirements.
Could you help me, please?
Thanks in advance!
Now I have another problem. I did what #monkeyinsight said to me (but not with a div but with a span, div breaks every other elemens in the html), and I have another problem:
When I put off the cursor of the icon, but I put on the text (because I go down and not up), this happens: http://i.imgur.com/Ld3AFMC.png Text doesn't disappear :(
Could you help me again, please? Thanks you!
Code of css':
span {
position: relative;
}
a.button {
color: #00628B;
margin-left: 7.5px;
margin-right: 7.5px;
-webkit-transition: color 0.15s ease-in, background 0.15s ease-in;
-moz-transition: color 0.15s ease-in, background 0.15s ease-in;
-ms-transition: color 0.15s ease-in, background 0.15s ease-in;
-o-transition: color 0.15s ease-in, background 0.15s ease-in;
transition: color 0.15s ease-in, background 0.15s ease-in;
}
a.button:hover,
a.button:focus {
color: #575757;
text-decoration: none;
outline: 0;
}
.twitter:hover::after,
.twitter:focus::after {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 60px;
content: "Contact by email";
display: block;
position: absolute;
top: 15px;
left: -65px;
color: #81A594;
text-decoration: none;
}
Span's code:
<span class="twitter">
<a class="button" target="_blank" href="mailto:adolphenom#gmail.com">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</span>
You should use CSS pseudo element ::after and assign content i.e. {content: 'twitter'}
My CSS calls for a background image that I want changed on a:hover. The class is working fine with the font color change, but I can't get my image to display anywhere.
<ul class="qualities_cycle">
<a href="http://spielconsulting.com/qualities/transition/" class="cyclehover">
<li class="grid_4">
<div class="title-wrap">
<h3>Partnership Transition</h3>
</div>
<h5>Lorem ipsum dolor sit amet consec</h5>
Seven out of ten Associateships fail - a devastating statistic. Spiel Consulting, however, sees tremendous success with Associateships...
</li>
</a>
</ul>
And here's the CSS
.qualities_cycle {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
.qualities_cycle li {
padding:0;
background:none;
border:none;
line-height:22px;
}
.qualities_cycle li .title-wrap {
position:relative;
padding:0 90px 0 60px;
}
.qualities_cycle li .icon {
position:absolute;
left:0;
top:0;
}
.qualities_cycle li .title-wrap h3 {
font-weight:normal;
}
.qualities_cycle li .title-wrap h3 a {
color:#0f0f0f;
text-decoration:none;
}
.qualities_cycle li .title-wrap h3 a:hover {
color:#80B34C;
}
.grid_4 {
display:inline;
float: left;
position: relative;
padding: 19px 9px !important;
}
a.cyclehover {
color:#0F0F0F;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a.cyclehover:hover {
color: #4C739B;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon2.gif") no-repeat scroll 0 0 transparent;
}
a jsfiddle link is here
I'm trying to get three columns in and this is what I have, but the images aren't showing up:
Just change CSS related to a.cyclehover
a.cyclehover {
color: #0F0F0F;
background-image: url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif");
display: block;
float: left;
background-repeat: repeat;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
transition: color .2s ease-out, background 1s ease-in;
}
After a quick glance, I've spotted these problems in your page:
You're using the background-image CSS property as if it was background.
Inside the <div> contained in the <a> you have floating elements, which are considered to be outside of the normal element flow in your page, so your <div> ends up having a null height: you can "fix" this by adding the overflow: hidden; style to the <div>.
You should not put block elements (such as <div>) inside an <a> at all, that's not valid HTML.
You're trying to apply a CSS transition to the background property, but background is not animatable: http://www.w3.org/TR/css3-transitions/#animatable-properties
In short: rewrite the page, follow some good documentation and use the W3C Markup Validator.
I didn't take a deep look into your code but you're using the background property the wrong way.
Basically, change this:
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
to this:
background:url(http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif) no-repeat 0 0;
Check if it works... if so, you can add the "scroll" property if it's really necessary. I don't even know what that "transparent" thing is... backgrounds are transparent by default so it shouldn't be necessary. If you need to apply another background-color, do so before the url()...
Btw, this is how you should 'think' background shorthands in CSS (at least is how I use them):
background: color url() repeat fixed left top;
so:
background: #000 url(imgs/logo.png) no-repeat scroll 0 0;
In the example, instead of the #000 color, you could use transparent, but again, it's the default. But use it if you have another rule setting a color and you want it to be transparent.
Also remember that backgrounds can only be applied to "block" elements. If your element is not a block element, set it to, for ex.: display: block; or display: inline-block; set a width and a height to it and you should be good to go.
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).