I'm looking for advice to reproduce (see this image) effect for my image hovers. My problem is that my images are fluid, and I haven't really been able to find any good tutorials on that subject combined with overlays.
I'm assuming I have to create a transparent png (white area + circle) which overlays the image on hover, and then the text overlaying that? And it all needs to resize accordingly with the image itself.
Also, the top border is not part of the image, it's generated with CSS, and I don't want that to be overlayed if possible.
Could anyone kindly point me in the right direction, or give advice if there's a better implementation? I'm rather lost.
Thank you in advance. :)
If the image is going to be contained in a div with a defined width, you can add an absolutely positioned div to that containing div that'll act as the overlay.
Assuming this snippet and that the opacity of the overlay is set to zero
<div class="picholder">
<img class="fancypics" src=http://placehold.it/500x650></img>
<div class="overlay"><p class="text_box">Hello World!</p></div>
</div>
the css for the hover effect would be
.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}
That should create the hover effect, I believe you're going for. The following css should center the overlay and some other stuff. see here for more on centering divs vertically and horizontally
.overlay {
bottom: 0;left: 0; top: 0; right: 0;
height: 150px;
width: 150px;
margin: auto;
position: absolute;
background-color:#3f3f3f;
border-radius: 50%;
opacity:0;
}
.fancypics{width:100%;}
.text_box{
color:white;
weight:bold;
font-size:2em;
padding:10px;
padding-bottom:50%;
text-align:center;
}
and of course the fiddle
Just use background-color to set a transparent color:
Demo here
HTML
<div class="overlay">
<div>Hello</div>
<span>January 16. 2014</span>
</div>
CSS
.overlay {
position:relative;
width:200px;
height:200px;
border-radius:50%;
}
.overlay:hover {
background:rgba(0,0,0,0.5);
}
.overlay > div {
position:absolute;
color:#fff;
font:50px sans-serif;
width:100%;
top:33%;
text-align:center;
}
.overlay > span {
position:absolute;
color:#fff;
font:12px sans-serif;
width:100%;
top:67%;
text-align:center;
}
The stippled line at the border of the upper text can be achieved using either a border-bottom or a single-line image which you attach as background to the div.
Hope this helps.
Related
I'm trying to apply an overlay on top of a background-image, where the image has an attribute background-size: contain. For the overlay that I want to apply on top of it, it doesn't have a background image. All it has is a black background color with an opacity:
.overlay {
background-color: black;
background-size: contain; /* this isn't working */
opacity: 0.5;
}
The image that I want to overlay is 600x600. I want the same to be applied on the overlay too, but I can't because it's not an image; it's simply a black background. How can I get the same square dimensions for the overlay without setting a hard-coded width and without using background-size: contain?
if you want an overlaying transparent div check this out. I usually do it this way. i have a container div containing my background image and black colour div with required opacity to 0.5 (or any other value).
working fiddle https://jsfiddle.net/am2hyf3d/
set the containers width and height to a fixed value
#container{
height:300px;
width:300px;
}
i set the width and height of both the divs inside the container to occupy the containers entire space
#overlay{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
}
If you want simply for the image to come out darker than it really is, you could put it in a container with a black background and give the image itself a 50% opacity.
By making the container an inline-block, it will shape itself to the size of the image inside, so you won't have to specify an explicit size.
.container {
background:black;
display:inline-block;
}
.container img {
opacity:.5;
vertical-align:top;
}
<div class="container">
<img src="https://i.stack.imgur.com/30Bby.jpg">
</div>
For reference, the picture itself looks like this:
a few ways to darken a background-image without an extra element:
div {/* commun css for demo divs */
width:180px;
height:180px;
margin:10px;
background-image:url(http://lorempixel.com/180/180);
color:white
}
.gradient {
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(http://lorempixel.com/180/180);
}
.shadow {
box-shadow:inset 0 0 0 180px rgba(0,0,0,0.5);
}
.blend {
background-color:rgba(0,0,0,0.5);
background-blend-mode:multiply;
}
/* extra for layout */
div {
display:inline-flex;
vertical-align:top;
align-items:center;
justify-content:center;
text-align:center;
font-size:2em;
}
<div class="gradient">darken gradient</div>
<div class="shadow">darken shadow</div>
<div>plain normal</div>
<div class="blend">darken blend-mode</div>
I have an absolutely positioned container that holds tag labels. These tags partially cover an image below them. When the user hovers over this container, I'd like for the tag labels inside the container to disappear.
The below almost works but the effect is inconsistent and very jittery when hovering over the container:
.main-container{
height:200px;
width:100%;
background-color:#ccc;
position:relative;
}
.slider-tag-container{
z-index: 10;
position: absolute;
bottom: 22px;
left: 20px;
padding-top:30px;
padding-right:30px;
}
.slider-tag-container .label{
border: 2px solid #fff;
margin-right:5px;
}
.slider-tag-container:hover .label{
display:none;
}
<div class="main-container">
<div class="slider-tag-container">
<div class="label label-primary">Some tag</div>
</div>
</div>
Here is a jsFiddle
Why does this "jittery-ness" occur?
How can I achieve the desired effect smoothly?
Give the wrapper element a min-width or width. The inner element going display:none is probably collapsing the wrapper to 0px by 0px.
Additionally, there may be an issue with :hover bubbling if you manage to get the cursor over the inside element before it triggers. I think a JS solution might be best here for more control over how it behaves.
I am trying to create responsive circle which fit on every screen size like this:
I tried some codes from but anyone not work properly according to requirement.
You should do it with SVG or 2x res PNG. It will be approximately the same size regarding bandwith but you'll get a better control and much faster render.
Try something like this:
<div class="container">
<div class="circle">
<img class="image" src="http://lorempixel.com/800/800/">
</div>
</div>
.container {
width: 100%;
background: #000;
}
.circle {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
background: #fff;
position:relative;
overflow:hidden;
z-index:2;
}
.image {
z-index:1;
position:absolute;
top:0;
left:0;
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}
The circle should fit the container..
see on fiddle: http://jsfiddle.net/jimmynewbs/doan8b2f/
You can then create a div inside this for the text / image and set the image to a maximum width of 100% and width auto. this will make sure it doesn't get bigger than the circle. Positioning the image absolute can help keep it within the circle too if you wanted to make it expand out to the edges...
I cropped an image in html & css . When i am coding a <span> tag the cropped image displayed. But I need to know how can I modify it.
I have the following code:
<style type="text/css">
.design {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>
When I am using the span tag, the cropped image displayed. But I want to modify it.
Example:
<span class="desgin" style='color: red;'></span></h3>
I want to color the image itself and change it's size and I am little stuck here.
Hope you understood me well, I will be glad for any help.
Thanks!
So you want to scale and then colorise the image? You can scale the image using background-size but this isn't very well supported. CSS3 filters unfortunately don't have a colorize filter also.
You should do this using an <img> so scaling works without background-size and then use another transparent element on top of the image to provide the tint effect. Unfortunately <img> tags don't support pseudo-elements so need to use a wrapper.
jsFiddle
HTML
<div class="red-tint">
<img src="https://www.google.com.au/images/srpr/logo4w.png" />
</div>
CSS
img {
/* scale the image */
width:200px;
height:auto;
}
.red-tint {
position:relative;
display:inline-block;
}
.red-tint:after {
background: rgba(255, 0, 0, 0.5);
display:block;
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
}
Update
Ah you want to crop, then that's just a matter of using background-position. You will need to give negative left and top positions to background-position which represent the offsets from the top-left corner of the image. For example, this will draw a 200x100 chunk of the image which is 100px in from the left side of the image and 20 px down from the top.
jsFiddle
.design {
width:200px;
height:100px;
background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat;
background-position:-100px -20px;
}
On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?
well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?
You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.
Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.
You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}