How to achieve something like the above image. The below gray color block is cropped in the middle with semi circle to accommodate the image. Should I use CSS animations or anything else to get this effect? So that the background of the below element can be cropped as per the image shape.
Use position:absolute; for the image icon and place it between two divs and instead of cropping you can give a background:#fff and padding so it looks like that.
See code Below:
.main{
position:relative;
height: auto;
}
.upper {
background: #eee;
height: 100px;
}
.lower {
background: #ccc;
height: 100px;
}
img.icon {
position: absolute;
top: 40%;
left:50%;
background: #fff;
border-radius:50%;
padding:2px;
}
<div class="main">
<div class="upper"></div>
<img class="icon" src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-24/48/1200-512.png" width="50" />
<div class="lower"></div>
</div>
JsFiddle: https://jsfiddle.net/75euot8d/1/
Related
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 need to insert photo in between divs (blue and light-blue) as in the following example.
I did it with absolute positioning:
HTML:
#*Blue and light-blue sections with photo*#
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd">
<div class="image">
<img src="/Content/pictures/MainPhoto.png" />
</div>
</div>
CSS:
.image {
position: absolute;
bottom: -100px; /* bottom space */
right: 100px; /* right space */
}
.image img {
display: block;
}
But this way doesn't work correctly when you change the screen resolution of the device.
I create JSFiddle with this example.
Could you please to suggest another way to resolve this problem?
I need to create responsive design without hardcoded values.
Thanks! :)
you could just use a background and a padding to keep image from sides : DEMO
HTML
<div class="imaged">
<img src="http://lorempixel.com/800/180/food/7"/>
</div>
CSS
.imaged {
padding:20px;
text-align:center;
background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
border:solid white 4px;
vertical-align:top;/* or display:block; + margin:auto;*/
}
from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3
<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
<img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>
HTML
<div class="container-box">
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
<div class="image">
<img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
</div>
</div>
CSS
.container-box {
position:relative;
}
.container-box img {
height:200px;
width:90%;
position:absolute;
top:20px;
left:5%;
border:3px solid #fff
}
Of course I'd never use inline CSS, but there you go. See fiddle here
I think this is what you are trying to do:
http://jsfiddle.net/dc6r1bny/
.image {
position: absolute;
bottom: 30px; /* bottom height */
left: 50%; /* position element 50% from left side */
margin-left: -421px; /* bring it back left half the image size */
}
Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.
add this css code to the image. it should work.
margin-right:auto;
margin-left:auto;
I am using css sprites. I have a simple image and a text. I want to display the image in center of the page and the text to vertically center to that image. I am new to css, I couldn't find a way to do it.
The code I have is
<div class="sprite"></div>hi
.sprite {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
Define background position and one div as like this
Css
.centerText{
float:left;
text-align:center;
}
.sprite {
width: 50px;
height: 72px;
background: url("http://s.cdpn.io/79/sprite-steps.png") 3px -6px;
}
HTML
<div class="centerText">
<div class="sprite"></div>hi
</div>
Demo
I need to implement a design to my webpage butI am kind of newbie with CSS.
What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:
... I want to add a rectangle with a transparent circle inside like:
... so the final result would be like:
I am currently adding this frame as an image an resizing the user's image but it decreases resolution.
I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.
Any Ideas?
Here try this DEMO. To check transparency, try changing body color.
<div class="outerCont">
<div class="innerCont centerAlign">
<img src="http://i.stack.imgur.com/FjDS6.png"/>
</div>
</div>
.outerCont{
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.innerCont{
background-color:transparent;
border:150px solid rgb(186, 230, 255);
border-radius:50%;
height:200px;
width:200px;
overflow:hidden;
}
.innerCont img{
position:absolute;
height:80%;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
.centerAlign{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
Well, there are 2 ways:
1)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic.jpg" class="profile_pic" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}
or
2)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic_frame.png" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;
}
HERE IS THE JSFIDDLE
.circle {
background-color:#fff;
border-radius: 50%;
width: 250px;
height: 250px;
text-align:center;
background-image:url('http://i.imgur.com/NGz1YlF.png');
background-repeat:no-repeat;
background-size:65%;
background-position:center bottom;
}
You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/