I'm trying to make a thumbnail with bootstrap3.
How can I make this, I mean to put this zoom-in glyphicon over the image?:
(sorry for paint shop :D)
Actually, I've got this:
with the following code:
<div class="thumbnail PNET-thumbcolor">
<div class="PNET-cursor-hand center-block text-center">
<img data-src="holder.js/140x140" alt="Producto">
<span class="glyphicon glyphicon-zoom-in"></span>
</div>
<div class="caption">...
</div>
</div>
Is there a way to make this with CSS only, without touching the bootstrap style?
Thanks in advance!
Please comment or ask if you need more information and/or improve! :)
UPDATE:
JSFIDDLE: http://jsfiddle.net/Leandro1981/AKwb4/1/
I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.
.PNET-cursor-hand
{
width:140px;
}
.PNET-thumbcolor .glyphicon-zoom-in
{
position:relative;
top:-20px;
right:5px;
text-align:right;
display:block;
}
Here the demo
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I have the following alignment:
<div class="main">
<div class="header"></div>
<div class="right-bar">
<div class="chat-user-content">
<span class="chat-user-photo">
<img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
</span>
<span class="chat-user-name">Fulano Silva</span>
<span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
</div>
</div>
</div>
.chat-user-status > img{
border-radius: 50%;
height:15px;
width:15px;
}
But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?
JSFiddle
Check this fiddle out: http://jsfiddle.net/3PduX/18/
I put display:block to the span, which i think may have been what you missed.
Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/
It uses the :after pseudo element.
If you are using two divisions one after other, you can use clear:both; in current div.
If you want to align the div to right,you can use .
I hope it will work.
Pish, posh. Images for UI are silly. That's why we have pseudo-elements!
Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:
http://jsfiddle.net/sickdesigner/N99j3/
Cheers!
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
http://healthybodyguru.com
If you load the site and wait 3 seconds you'll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.
I've tried adding custom CSS to lower it by adding margin/padding to the top but that didn't make a difference.
Any ideas what CSS I can use to make it line up with the other social buttons?
Thanks!
Try setting:
#___plusone_0 {
font-size: default; !important
}
Override inline CSS styles with !important.
The solution was to add:
#attentionGrabberWrap .plusoneBtn iframe{
margin-bottom: -3px !important;
}
I got help from the plugin creator :)
try putting a span tag around the google +1 button and pad that top.
<span style="padding-top:5px;">[shortcode]</span>
I don't know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.
As you can see I like divs and not spans. I've always gotten better results from divs than spans when css is playing around.
<div id="attentionGrabber">
<div id="centeredPart" style="width: 575px; margin:0 auto">
<div style="float:left;" class="facebookBtn">
...like code....
</div>
<div style="float:left;" class="twitterBtn" >
...twitter code...
</div>
<div style="float:left;" class="plusoneBtn">
...+1 code...
</div>
<div style="float:left;" class="linkToForums">
Check out our new forums:
<a class="link" href="http://healthybodyguru.com/forum/">go!</a>
</div>
<div style="clear:both"></div>
</div>
<div id="closeAttentionGrabber"></div>
</div>
I just put an invisible letter behind mine. A bit hacky but it worked for me.
<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>