I am using a .png image and I want to create a big white shadow, like an aura, around it; but I want it just to affect the background, and not text and other elements I have in the page!
How it could be helped? Is there a method for making the shadow hit just the background? Or i can't at all? Thanks!
HTML:
<div class="background">
<div id="round"></div>
<div class="text">
TEXT
</div>
</div>
CSS:
#round {
filter: drop-shadow(0px 0px 40px red);
width: 100px;
height: 100px;
background-color: yellow;
margin: 0px;
display: inline-block;
}
.background {
background-color: #ddd;
}
.text {
color: yellow;
font-weight: bold;
font-size: 50px;
float: left;
}
This way the shadow will be reflected on the text, that is not what i want to archieve.
As asked, also a fiddle of the problem: https://jsfiddle.net/k371t6jd/
Nobody could give an answer. The solution was: you can't. Regards.
Related
I have two <div> elements. When the user hovers, a transformation of transform: translateY(x, y); is applied. However, a black border also somehow appears (there should only be a red border) when the user hovers.
Resolution: 1920*1080
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px)
}
<div class="link">
<div class="element">
test
</div>
</div>
I am not absolutely sure I am understanding the problem, but one way to get rid of the black on hover is to set the background to transparent then. See snippet below.
Note that trying to get exact alignment of very thin borders/lines (1 CSSpx in this case) is not always possible given modern displays use several 'physical' pixels for one CSS pixel. Sometimes zooming in/out shows/doesn't show 1 (display) pixel 'left behind'. And I have seen this in this case, so certain display sizes may show the black.
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px);
background: transparent;
}
<div class="link">
<div class="element">
test
</div>
</div>
I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images:
I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius:
This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've written to achieve this:
<div class="slider">
<div class="slide">
<!-- Content -->
</div>
</div>
CSS:
.slider {
background: #21639e;
}
.slider .slide {
background: url("image.jpg") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
}
I did try adding border-bottom: 5px solid #fff; to the .slide class, but it ended up looking like this:
I've created a jsfiddle for you to test what I'm trying to achieve.
Yes, you can try and use box shadows to create this kind of border. Applying a white box shadow on the outer side of the element will make it look like a stroke/border.
This - border-bottom: 5px solid #fff; produces a different kind of effect because we are applying only the bottom border to the element. The borders on the left and right are non existent (zero width) and so the line thins out as you go nearer to the edges.
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
height: 200px;
background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
Below is an updated version of your Fiddle.
For a more graceful looking curve then you can also try the below approach. It uses a pseudo element which is wider than the .slide and then centers the image within it. (I feel that this approach makes it look closer to the original image but the choice is yours)
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
position: relative;
height: 200px;
width: 100%;
overflow: hidden;
}
.slider .slide:before {
position: absolute;
content: '';
left: -2%;
top: -6px;
width: 104%;
height: 100%;
background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
Is it possible to make an entire element invisible except for its border or outline using pure CSS? By "invisible", I mean entirely transparent (i.e. visibility: hidden; or opacity: 0;) with a visible surrounding border. All text, children, background, et al., would be hidden.
I know this could be accomplished by creating a parent div around the invisible element, but I am curious as to whether or not it would be possible to achieve the same effect without changing the HTML.
Can this be done?
Hmm, I think it is:
HTML
<div id="element">
...
</div>
CSS
#element {
width: 100px;
height: 100px;
border: 1px solid #000;
}
#element * {
opacity: 0;
}
You could do something like that using child selections.
Example
<div class="box">
<p>some child content</p>
</div>
.box{
width: 100px;
height: 100px;
border:5px solid black;
}
.box >* {
opacity: 0;
}
You can use RGBA as color to achieve that, have a look at this:
LIVE DEMO
THE STYLE:
body {
background: red;
}
div {
width: 100px;
height: 60px;
border: 4px solid black;
background: rgba(255, 255, 255, 0.2);
}
div * {
opacity: 0;
}
THE MARKUP:
<div>
<span>Guten Morgen</span>
</div>
I am a new user to html and css and am making my first website. I am trying to take an image and have an image hover over it, except appear as a different color. I read other posts similar to this, but am still having difficulties.
This is the portion of my html:
<div id= "silhouette_3">
<img src= "images/silhouette_kickboxing.gif" />
</div>
and this is the css:
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#silhouette_3 img:hover
{
background-image: url('images/silhouette_kickboxing_color.gif');
z-index: 100;
}
I believe one of my issues is that one image is a background image and the other is not, but I am unsure of what else I could try. Any help out there would be much appreciated. Thanks so much!
You're right, the images/silhouette_kickboxing_color.gif is a background but <img src=".."/> is not.
Here is a solution:
<div id= "silhouette_3">
<img />
</div>
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img:hover
{
background-image: url('images/silhouette_kickboxing_color.gif');
z-index: 100;
}
When the img is not actually a image anymore, I prefer you should relace it with a div.
First Image:
Second Image:
CSS
#hovereffects:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Fiddle
You can also check this Fiddle
You are right that the problem is one of the image is a background-image and the other is not, you can fix it by placing the colored image on top and the default image as the background-image then use opacity to hide the top layer (colored image) and finally show it on mouseover:
HTML:
<div id= "silhouette_3">
<img src= "images/silhouette_kickboxing_color.gif" />
</div>
CSS:
#silhouette_3{
background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
opacity: 0;
}
#silhouette_3:hover img
{
opacity: 1;
}
Technically speaking, your code probably works, but the background-image won't show even though it's there when you hover your mouse over it because a background can't show above its foreground. You can't set the z-index just on the background-image because it's not a separate element.
There are many ways to accomplish this. You could set a background image on the div, then set your other image only to show when you hover over it.
For example:
HTML:
<div id= "silhouette_3">
<img src= "http://lorempixel.com/400/200/sports" />
</div>
CSS:
#silhouette_3
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url("http://lorempixel.com/400/200/abstract");
background-repeat: no-repeat;
}
#silhouette_3 img {
visibility: hidden;
}
#silhouette_3:hover img {
visibility: visible;
}
This way, the background-image in the CSS is the one that shows initially and the one in the img tag is the one that shows when you hover over it.
I created a demo at CodePen: http://codepen.io/Ghodmode/pen/foIhJ
Update: The images seem to me more like content than presentation, so I'd rather have them in the HTML than the CSS. I updated my CodePen demo to do it a little differently. I like this way better ...
HTML:
<div id="silhouette_4">
<img class="img1" src="http://lorempixel.com/400/200/city">
<img class="img2" src="http://lorempixel.com/400/200/people">
</div>
CSS:
#silhouette_4 img {
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#silhouette_4 .img2 {
display: none;
}
#silhouette_4:hover .img1 {
display: none;
}
#silhouette_4:hover .img2 {
display: inline-block;
}
I have the css code below along with an image to show it's output. I need help though 2 things.
This code works pretty good to show the username on the photo, however I noticed today while using chrome all day often when I would click a link that would take me to the page that has images with this code, it would not show the name on the image, it would just show the name below the image and the transparent black div would not be visible at all and the name would not even be on the image, I would then refresh the page and it would work fine, what could cause this, this was while my PC was acting like it was short on memory, could that be part of the issue?
I would like to make a bar show at
the top of the image that is the
width of the image and like maybe
2-3 pixels tall and have a
background color of like blue. What
I am wanting to accomplish is for
femail users there will be a pink
bar over there image and a different
color for males. Can someone who
knows css help me modify this to do
that the best please
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
Since I've written this code for you, seems logical that I also try to fix it...
It seems that Chrome is struggling since it doesn't know the height of the element. Let's use margins instead of positioning
Also, since you are using a set height, you could drop positioning all together and use the following CSS (In which case you shouldn't need the above code):
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
EDIT: You've asked for a top colored bar for the gender. You can use the following HTML:
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
With the following CSS:
div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }