I want to make a shadow around a rounded image, to do so I used a border-radius: 100px and a box-shadow: 0 0 5px 5px #888; to it, but I want to make it deeper to reach the circle and remove that white part.
Here is a screenshot of what it looks like.
.bubbles {
border-radius: 100px;
box-shadow: 0 0 5px 5px #888;
}
<img class="bubbles" src="https://img4.hostingpics.net/thumbs/mini_771288logomesure.png" alt="Heberger image" />
JSFiddle here
If you can't change the image and need a CSS solution. Use a div and set the background-image instead of using an <img /> tag.
.bubbles {
width: 147px;
height: 147px;
border-radius: 100px;
box-shadow: 0 0 5px 5px #888;
background-image: url('https://img4.hostingpics.net/thumbs/mini_771288logomesure.png');
background-origin: border-box;
background-position: -10px -10px, center;
}
<div class="bubbles" />
You want to remove the "white part", is this part the white border around the image?
The border is due to the white background of the image you're using. I suggest you directly edit it (using Gimp or Inkscape) to get rid of it. See How to make a color transparent using Gimp to get an explanation.
Hope it will help !
I'm trying to get a square div that says "read more" when hovering over a circle div with a picture inside it. Been trying different things and haven't found a working solution on google.
HTML
<div class = "portfolio" id = "first"> <!-- makes the circle -->
<a href = "cake-page.html">
<div class = "readm"> Read more </a> </div>
<img src = "cake.jpg" />
<p> The cake </p> </div>
CSS
.portfolio {
/* the circles on the portfolio-page */
position: relative;
border-radius: 100%;
display: inline-block;
height: 150px;
width: 150px;
border: 2px solid purple;
}
.portfolio.img {
opacity: 1;
transition: 1s ease;
background-size: 90px 0px;
overflow: hidden;
border-radius: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
width: 150px;
height: 150px;
}
.portfolio:hover {
/* hover effect on portfolio circles */
opacity: 0.6;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1 ease;
visibility: visible;
}
So either the text pushed the image down or it stays in the top of the circle and I can't get it to hover together with the other hover effect. I want the "read more" to pop-up in a rectangular div when hovering over together with the other hover effect.
I did not include the div class "readm" since I can't get it to work. FYI I'm pretty new to this. Thanks.
A little tough without a working example and it'd be good to see the readm css since we need to see what isn't working. That said, have you tried something like this:
.readm {
opacity:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.portfolio:hover .readm {
opacity:1;
}
Also I would place the start of that a tag inside the readm div.
First, you need to fix your markup.
You are closing the anchor ("a") tag before closing a DIV. That alone will make your CSS fail.
I presume you want to close the DIV like so:
<div class="readm">Read more</div>
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
I'm trying to put a vignette on an image link, that when hovered over dissipates. The current code I'm using works fine in Firefox, but in chrome, the transition effect doesn't run.
If you were to remove the thumbnail image, the background has the same effect and does show the transition on it.
Is this a bug?
<article>
<div class="thumbnail">
<img src="images/download.jpg" alt="" />
</div>
<div class="article-text">
<h3>Article Header</h3>
<div class="author">
Author Name here. Date Posted Here.
</div>
<p>Lorem ipsum</p>
<div class="meta">
<ul class="meta-items">
<li>Arbitrary Number</li>
</ul>
<a class="button" href="#">
<span>Read More</span>
</a>
</div>
</div>
</article>
The full css/html can be seen on JSfiddle:
http://jsfiddle.net/aSTKK/
No, it is not a bug. Transitions on pseudo-elements only work in Firefox (personally, I'd like to see them working in other browsers in the future), though there is a way to emulate them for some properties. If you remove the thumbnail image, you see the transition on the element itself (which is below the image when you have it), not on the pseudo-element.
Possible solution: you could make the image semitransparent and change its opacity to 1 on hover (see this gallery of examples I did a while ago, especially row 3, column 3).
Something like this (I've changed the shadow on the pseudo-element to red in order to make it more visible).
Relevant CSS:
.thumbnail {
width:48%;
height:200px;
float:left;
padding:0;
background:#37779f;
box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5);
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
overflow:hidden;
text-align:center;
}
.thumbnail a{
position:relative;
max-width:100%;
float:left;
}
.thumbnail:hover{
box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5);
}
.thumbnail a:after{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
box-shadow:inset 0 0 115px 20px rgba(255,0,0,1);
}
.thumbnail img {
width:100%;
height:auto;
opacity: .3;
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
}
.thumbnail:hover img {
opacity: 1;
}
I have frame styles for the image:
.frame {
background:#efefef;
border:1px solid #f6f6f6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* #todo Old Browsers Fix */
margin-bottom:15px;
padding:4px;
}
in one place of the project I work on, I have following HTML code:
<a href="#" class="preview">
<img class="frame" src="http://placehold.it/288x159" alt="" />
</a>
Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:
.preview img.frame {
margin:0;
position:relative;
}
.preview:hover {
background:url('../img/icon_zoom.png') center center no-repeat;
display:inline-block;
z-index:40;
}
.preview img { /* #todo Add different browsers rules */
opacity: 1;
/*moz-transition-property:opacity;
-moz-transition-timing-function:ease-out;
-moz-transition-duration:500ms;*/
-moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
opacity:.5;
-moz-transition:opacity 1s ease-in-out;
/*-moz-transition-property:opacity;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;*/
display:block;
position:relative;
z-index:-1;
}
However I faced few issues:
- how can I show background only for image body (currently it's also being displayed on the border)?
- why opacity is not being changed in Chrome?
jsFiddle added. As you may see, it works in FF, but not in Chrome.
The problem appears to be that you're changing the display to inline-block. Take it out, it should have the same functionality and work just fine.
Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/