I have a footer in which I have different icons for my social media. Now, I want to create a hover effect, which displays the name of hovered icons.
For example: My mouse is over the facebook icon, and then the text 'Facebook' should come up in a div, located in a div below!
I know how to create this, however, I don't know how I display these names in the same div at the exact same place. How can I do this?
<div id="footer1" style="position: fixed; bottom: 0;">
<div class="content-wrapper">
<div class="ft-div-left"> </div>
<div class="ft-div-right">
<p></p>
</div>
<div class="ft-div-middle">
<center>
<p>
<center>
<span class="" style="color: white;"></span>
<span class="" style="color: white;"></span>
<span class="icon-stumbleupon3" id="issuu" style="color: white;"></span>
<span class ="icon-twitter3"></span>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
<div id="hoverText">
<span>Here goes the text</span>
</div>
</div>
</div>
I personally use the title="" tooltip inside whatever tag I am using.
<div id="hoverText">
<span title="hover text">Here goes the text</span>
</div>
This title="" tooltip seem to work about anywhere and on anything.
I'm assuming a CSS only answer was what you are looking for.
You can do this with CSS using visibility and ofcourse :hover
Here's the Jsfiddle
Example:
Html-
<div id="facebookicon">
<img src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"> </img>
</div>
<div id="onhoverfb">Follow Us</div>
CSS -
#onhoverfb{
visibility: hidden;
}
#facebookicon:hover ~ #onhoverfb{
visibility: visible;
}
Remember to set the :hover on the div that is going to be hovered over.
Extra: You can always add the css transition property to have the hover appear more smoothly. Like a fade in.
Related
I've a html page with two span tag's which displays the same content but nested in a div with different class name:
<div class='class1'>
<span class='test-icon'>1</span>
</div>
<div class='class2'>
<span class='test-icon'>2</span>
</div>
Is there a way i can show only one <span> at a time based on the nested class, e.g. i've tried with the div.class1 span.test-icon {display: none}but it hides both.
You didn't close your span tags!
Here you are:
.class1 .test-icon{
display: none;
}
/*.class2 .test-icon{
display: none;
}*/
<div class='class1'>
<span class='test-icon'>Hola</span>
</div>
<div class='class2'>
<span class='test-icon'>Adios</span>
</div>
This seems to work as it should:
div.class1 span.test-icon {display:none;}
<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>
<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>
I have a center div and a simple problem...
I don't know how to place a image right to it relative(!) like this:
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
</div>
<img id="arrow_down" src="img/arrow_down.png">
Here is the code: http://codepen.io/lalaluki/pen/pNNYpZ
Does somebody knows a trick?
You can place something like <span>▾</span> inside your .text_middle element. I used the html symbol code for a downside triangle because you did not provide the image in your pen example. But you can try it with an image or glyphicon instead.
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<span>▾</span>
</div>
See the pen here
.vertical_align{
vertical-align:middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="top_bar">
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
<span class="glyphicon glyphicon-chevron-down vertical_align" ></span>
</div>
</div>
Try this.
Hope this helps.
I would apply float:right to the image:
#arrow_down {
float:right;
}
Need to change your HTML Structure to achieve this quickly. Add image inside '.text-middle' div
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<img id="arrow_down" src="img/arrow_down.png">
</div>
Add vertical align middle to your image
#arrow_down {
vertical-align: middle;}
Hope this will help you
I got a couple of divs that load content in them, but every content is different, and the read more link at the bottom is pushed along with the content.
How can I get the link to stick to the bottom of the div?
Example:
The html code of one box:
<div class="vertical-item gallery-extended-item with_background text-center" style="height: 330px;">
<div class="item-media">
<div class="media-links">
<a class="abs-link" title="" href="nieuwsbericht-5.html"></a>
</div>
</div>
<div class="item-content">
<h3 class="item-title">
Project test
</h3>
<span class="categories-links">
<a rel="category" href="#" class="theme_button small_button color1">Nieuws</a>
</span>
<br>
<p>Project test opgeleverd - februari 2016</p>
<p>
Lees verder
</p>
</div>
</div>
Use absolute position on the link, he will stay at the same place every time, no matter how long the text above is.
See it here
.bottom { position: absolute; bottom : 100px; left: 0; right: 0; }
Try position:absolute, along with bottom, this will place the element from bottom 20px up.
Below is the updated code <a class="sbottom" href="nieuwsbericht-5.html">Lees verder</a>.
.sbottom {
position: absolute;
bottom: 20px;
}
<div class="vertical-item gallery-extended-item with_background text-center" style="height: 330px;">
<div class="item-media">
<div class="media-links">
<a class="abs-link" title="" href="nieuwsbericht-5.html"></a>
</div>
</div>
<div class="item-content">
<h3 class="item-title">
Project test
</h3>
<span class="categories-links">
<a rel="category" href="#" class="theme_button small_button color1">Nieuws</a>
</span>
<br>
<p>Project test opgeleverd - februari 2016</p>
<p>
<a class="sbottom" href="nieuwsbericht-5.html">Lees verder</a>
</p>
</div>
</div>
I am designing a website for software created by my self. For this, I need a layout in which three boxes are on the same horizontal position. But as I put text in those they start shifting.
What might be the possible cause?
<body class="metro">
<nav class="navigation-bar">
<nav class="navigation-bar-content">
<div class="element">My Software Name</div>
<span class="element-divider"></span>
<a class="element place-right" href="#">Download</a>
</nav>
</nav>
<div class="slideImage"></div>
<div class="about">
<div class="infoBar">
<h2>What is ?</h2>
<span class="paragraph">
this is example text to illustrate the real problem regardig the info bar alingment
</span>
</div>
<div class="infoBar"><h2>Why this ?</h2>
<span class="paragraph">
</span>
</div>
<div class="infoBar"><h2>About</h2></div>
</div>
</body>
Here is full Scree Example
You could do it by set the vertical-align:top; to .infoBar to remove the vertical whitespace between inline-block elements.
JSFiddle - DEMO
CSS:
.infoBar {
vertical-align:top;
}
I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.
EXAMPLE FIEDLE
<span class="top-head"> Recommended URLs </span>
<div class="c1">
<div class="item">
<div class="image">
<img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
</div>
<div class="descriptionContainer">
<span class="main-head"> Mashable - Business </span>
<span class="min-head">Title of link Title of link Title of link Title of link </span>
<span class="subcont">
<span class="fa fa-retweet"> RT 100+ | </span>
<span class="fa fa-twitter"> Tweet 100+</span>
</span>
</div>
</div>
</div>
Give fixed width for span class and add display block
.min-head { width:150px; display:block}
Will this help you?
span.min-head {
display: block;
font-size: 9px;
margin-top: 1px;
max-width: 130px;
white-space: pre-wrap;
}
Check the fiddle HERE