I bet this is probably something stupid, I am trying put an absolute element over an image, but its not appearing.
<div class="circle" style="position: absolute; top: 200px; left: 100px;"></div>
<img src="images/madison-siteplan.png" class="siteplan" />
here is the attentional css for the circle:
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
color: red;
}
It has no border or outline, so the edge won't show up.
It has no background colour, so it is transparent.
It has no content inside it, so the foreground colour has no practical effect.
Change any one of the above.
Move the absolutely positioned element to be after the image. Give that element some visual properties so you can see it... (border, background-color, text...)
#bla {
width:350px;
height:350px;
border-radius: 50%;
background-color: rgba(255,0,0,0.5);
position:absolute;
top: 0;
}
<img src="http://placehold.it/500">
<div id="bla"></div>
#Quentin is right, I just read his answer, but since I already made a snippet, I add it here. (I only added a background-color to the original code, apart from moving the inline CSS to the external CSS rule):
.circle {
position: absolute;
top: 200px;
left: 100px;
border-radius: 50%;
width: 100px;
height: 100px;
color: red;
background: green;
}
<div class="circle"> </div>
<img src="http://placehold.it/400x400" class="siteplan" />
Related
I'm trying to put two images on top of each other in the HTML of an email, but it fails. It displays fine in normal HTML, but when it comes to the email layout, it collapses.
code
<td className="icon">
<img class="block" src='./img/b.png' />
<img src='./img/a.png' />
</td>
<style>
.block {
margin-bottom: -15px;
margin-left: -40px;
}
</style>
margin isn't working totally.
Do you have any ideas in MAIL HTML?
ideal:
issue:
I am not sure, but I think your "td" with the icon class should have a bigger width in your layout. So the margin of -40px does not work right. I guess you can try hardcode the icon width, increase the negative margin value or position your images as absolute within your container.
I also leave this "logo" draw with CSS below. I hope it can help you a little. (You can change the width and height of the container for your needs).
HTML
<div class="circles-container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
CSS
.circles-container{
position: relative;
display: flex;
width: 200px;
height: 100px;
background-color: transparent;
}
.circle{
position: absolute;
top:0;
width: 50%;
height: 100%;
border-radius: 50%;
transform: translateX(-50%);
}
.circle1{
left: 33%;
background-color: #3484b9;
}
.circle2{
left: 66%;
background-color: #ffd61e;
}
How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?
**Update: Thank you for your help. I have attached some images of relevant html and css to illustrate what I'm trying to do. I'm hoping to get the circles to surround one person's face, even though the image itself resizes with the browser. Thanks!
Webpage Image HTML CSS
One way I would recommend would be to use position:relative on your circle image, add it after the image you want in on top of, and set the left value to -outerWidth of 1st image. You should also put both of these in a span and add css to prevent line break as well
The code below gives examples of circles that remain within their parent square, and can be positioned in proportion to their parent squares. I've created some CSS so that you can add a class to various divs to change their size, etc.
N.B. You cannot apply .large or .small to the circles, their size is proportional to their parent div, although this does not have to be the case.
.square {
width: 100px;
height: 100px;
background: blue;
text-align: center;
margin: 5px;
float: left;
}
.large {
height: 200px;
width: 200px;
}
.small {
height: 50px;
width: 50px;
}
.circle {
position: relative;
border-radius: 50%;
background: red;
color: white;
}
.center {
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
.left-center {
left: 0;
top: 25%;
width: 50%;
height: 50%;
}
.right-center {
left: 50%;
top: 25%;
width: 50%;
height: 50%;
}
<div class="square small">
<div class="circle left-center">
</div>
</div>
<div class="square">
<div class="circle center">
</div>
</div>
<div class="square large">
<div class="circle right-center">
</div>
</div>
Everything is explained in the title of this post. I'm trying to put an PNG image in the center bottom border of a div element.
.content_block {
border: ridge;
border-width: 1px;
border-color: #969696;
height: 200px;
width: 200px;
}
.content_block.orange {
background-image: linear-gradient(#FBB03B, #FF9933);
}
<div class="content_block orange"></div>
Here's an image of what I'm trying to do:
I searched the net for a way to that with CSS, and border-image and stuff, but nothing worked.
To achieve the effect of it being exactly in the middle of the border, you will have to include the border with the image by inheriting it, and making it invisible. Like this, you can 'calculate' with it.
See this Fiddle for the effect. In this Fiddle, I've created a pseudo element that has a background-image of a play button.
The CSS that does the trick is this:
div::after{
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 30px;
height: 30px;
background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
background-size: cover;
background-repeat: no-repeat;
transform: translate(-50%, -50%);
border-top: inherit;
border-top-color: transparent;
}
I've placed it to the absolute bottom and 50% from the left. Then with the transform property, I shifted it to be centered around these points (50% from the left, and 100% from the top);
Then to make it move along with the border, I inherited only at the top, and made it invisible.
.content-block {
position: relative;
width: 200px; height: 100px;
border: 1px solid #f0f;
}
.content-block img{
position: absolute;
left: 50%; bottom: 0;
width: 50px; height: 50px; margin: -25px;
}
<div class="content-block">
<img src="http://placehold.it/50x50" alt="">
</div>
If you have a relative positioned parent, you can manipulate the position of an inner child using position:absolute;
Add an img in html
<div class="content_block orange">
<img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/>
</div>
Add this to your css.
.element { width:32px;
height:33px;
display:block;
background-color:grey;
margin-left:auto;
margin-right:auto;
margin-top:185px;
border-radius:100%;
}
Hope that helps!
Put an image inside the orange div and add text-align:center to the div
<div class="content_block orange">
<img src="" height="30" width="30">
</div>
and then set margin-top to the img. Check this Fiddle
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.
It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.)
I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle.
I would prefer for it to be mainly CSS + HTML.
Try This
div.circle {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
}
div.square {
border: solid 21px #f0f;
width: 50px;
height: 50px;
}
<div class="circle">
<img/>
</div>
<hr/>
<div class="square">
<img/>
</div>
More here
You can use special characters to make lots of shapes. Examples:
http://jsfiddle.net/martlark/jWh2N/2/
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>
Many more can be found here: HTML Special Characters
i don't know of a simple css(2.1 standard)-only solution for circles, but for squares you can do easily:
.squared {
border: 2px solid black;
}
then, use the following html code:
<img src="…" alt="an image " class="squared" />
If you want your div to keep it's circular shape even if you change its width/height (using js for instance) set the radius to 50%. Example:
css:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
html:
<div class="circle"></div>
Circle Time! :) Easy way of making a circle with a hollow center : use border-radius, give the element a border and no background so you can see through it :
div {
display: inline-block;
margin-left: 5px;
height: 100px;
border-radius: 100%;
width:100px;
border:solid black 2px;
}
body{
background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
background-size:cover;
}
<div></div>
To my knowledge there is no cross-browser compatible way to make a circle with CSS & HTML only.
For the square I guess you could make a div with a border and a z-index higher than what you are putting it over. I don't understand why you would need to do this, when you could just put a border on the image or "something" itself.
If anyone else knows how to make a circle that is cross browser compatible with CSS & HTML only, I would love to hear about it!
#Caspar Kleijne border-radius does not work in IE8 or below, not sure about 9.
Shortly after finding this questions I found these examples on CSS Tricks: http://css-tricks.com/examples/ShapesOfCSS/
Copied so you don't have to click
.square {
width: 100px;
height: 100px;
background: red;
}
.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
<div class="square"></div>
<div class="circle"></div>
There are many other shape examples in the above link, but you will have to test for browser compatibility.
In case of circle all you need is one div, but in case of hollow square you need to have 2 divs.
The divs are having a display of inline-block which you can change accordingly. Live Codepen link: Click Me
In case of circle all you need to change is the border properties and the dimensions(width and height) of circle. If you want to change color just change the border color of hollow-circle.
In case of the square background-color property needs to be changed depending upon the background of page or the element upon which you want to place the hollow-square. Always keep the inner-circle dimension small as compared to the hollow-square. If you want to change color just change the background-color of hollow-square. The inner-circle is centered upon the hollow-square using the position, top, left, transform properties just don't mess with them.
Code is as follows:
/* CSS Code */
.hollow-circle {
width: 4rem;
height: 4rem;
background-color: transparent;
border-radius: 50%;
display: inline-block;
/* Use this */
border-color: black;
border-width: 5px;
border-style: solid;
/* or */
/* Shorthand Property */
/* border: 5px solid #000; */
}
.hollow-square {
position: relative;
width: 4rem;
height: 4rem;
display: inline-block;
background-color: black;
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: white;
}
<!-- HTML Code -->
<div class="hollow-circle">
</div>
<br/><br/><br/>
<div class="hollow-square">
<div class="inner-circle"></div>
</div>