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'}
Related
I discovered CSS transitions this morning on StackOverflow (I'm a newer web developer, mind you.) and I was trying to re-vamp one of the sites that I'm currently building, by adding a nice fade-in effect on my link color changes & my div hover effects on my page. The effect works very nicely, but I'm noticing a weird delay that hopefully someone can help me out with.
The Problem: When I have nested elements that should both receive a transition, they aren't happening simultaneously, they are waiting for the parent transition to stop and then the child transition begins.
HTML: Note - This is razor text normally, but I have provided the raw HTML without any C# syntax
<div class="image-caption">
<h1>Heading</h1>
<p>Hello world, I am an example paragraph.</p>
<a href="#" target="_self">
<div class="image-link">
Link Text!
</div>
</a>
</div>
CSS / LESS:
I was looking for a way to quickly convert all div & link effects on my site to fade smoothly. I found the code below on StackOverflow and noticed that if I didn't include the :hover & :focus selectors, that all of the links on the page would transition from a pretty large size down to their normal size when the page loaded which looked funny.
div, a, i{
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
And here is the code for the actual styling of the caption.
.image-caption {
//irrelevant CSS removed here
a {
&:hover, &:focus{
color: rgba(19, 56, 97, 1.0);
.image-link{
border-color: rgba(19, 56, 97, 1.0);
}
}
}
}
Use transition property directly on selectors (not on hover and focus states)
div, a, i {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
I was able to make it work by removing the DIV declaration on the global DIV / I / A transition rule, and then creating a couple of mixins to handle independent transition cases like this.
New Global Rule & Mixins:
a, i {
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
.no-fade() {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.make-fade() {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
New CSS / LESS to fade nests at the same time: - (for clarification, .image-link is a DIV)
a {
font-family: 'Source Sans Pro';
color: #FEFEFE;
text-transform: uppercase;
font-size: 18px;
&:hover, &:focus {
color: rgba(19, 56, 97, 1.0);
.no-fade();
.image-link {
.make-fade();
border-color: rgba(19, 56, 97, 1.0);
}
}
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>
I have a tool tip, and its basically not working. I did some searching, and the usual response is that you haven't added your position's, however I have those and im truly stumped.
The problem is that in the live demo below, the tool tip from the icons on the left, wont go on top of the content to the right, so I cant see it.
The code mainly lies here;
a.icon {
position: relative;
text-decoration: none;
}
a.icon .tooltip {
-webkit-transition: opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
-moz-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
-o-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
opacity: 0;
font-size: 11px;
color: #FFFFFF;
background:url('../images/tooltip.png') no-repeat bottom center;
position:absolute;
height: 40px;
line-height: 50px;
left: 100px;
text-align:center;
padding-left:10px;
width: 110px;
display: block;
top: 24px;
z-index: 1000;
}
a.icon:hover .tooltip {
opacity: 1.0;
top:24px;
}
And here is the HTML, with lorem removed;
<div id="icons">
<a href="info page" class="icon" id="info"><span class="tooltip">About Me</span>
<span class="tooltip">Portfolio</span>
<span class="tooltip">Mail</span>
<span class="tooltip">Skype</span>
<span class="tooltip">Twitter</span><!-- Holds the icons for the site -->
</div>
<div id="content">
raesent at quam velit,
</div>
There are span classes referring to tooltip, but this text box wont let me add them as code.
And in short, it doesn't work. I do have the example live here:
Sorry if its a pain to look through the code, im new to this, just starting my first portfolio, and I haven't organized or commented much yet.
Thanks very much.
.......................................
Hi now define your #content position and z-index
as like this
#content{
position:relative;
z-index:-1;
}
or 2nd option
#icons{
position: relative;
z-index: 2;
}
for opacity
write this css
#info:hover, #portfolio:hover, #email:hover, #skype:hover, #twitter:hover{
opacity:1;
}
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).
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.