Picture describes all. I know how to make this circular image. But still don't know the way to place the image like this. Circular Image should stay middle of the div, as the div's width change.
you have to set the parent element as relative (position:relative) the wrap your img in a div with an absolute position 50% left or right depending on you.
<figure>
<figcaption class="top">assassin's creed</figcaption>
<div><img src=http://www.pulpfortress.com/wp-content/uploads/2010/11/Ezio-Assassins-Creed.jpg /><div>
</figure>
Demo
figure{
width:400px;
height:300px;
background:#444;
position:relative;
}
figure div{
width:150px;
height:150px;
overflow:hidden;
border-radius:100%;
position:absolute;
bottom:-75px;
left:50%;
margin-left:-75px;
}
figure img{
width:100%;
height:160px;
}
figcaption{
width:100%;
text-align:center;
padding-top:40px;
color:white;
font-size:20px;
}
You could use position relative to shift the image from the bottom div over the boundary between the two.
CSS
.top {
background: grey;
height: 120px;
}
.bottom {
background: white;
text-align: center;
height: 60px;
}
.bottom > img {
position: relative;
top: -50%;
}
HTML
<div class="wrap">
<div class="top">HELLO PROGRAMMERS!</div>
<div class="bottom"><img src="image.png" /></div>
</div>
Related
I need to be able to replace the image and keep the text/circle. This will be on a responsive site so it needs to work accordingly. (*on bootstrap 3 platform.)
Here's what I got so far:
.box {
color:#fff;
height:auto;
position:relative;
z-index:0;
overflow:hidden;
max-width:586px;
}
.box:after {
content:'yarn';
display:block;
height: 160px;
width:160px;
background-color:red;
border-radius:50%;
position:absolute;
bottom:-10px;
left:40%;
z-index:-1;
}
<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>
Try setting the border-radius just for the top right and top left corners using:
border-top-left-radius: 80px;
border-top-right-radius: 80px;
Note: I used 80px not 50%, as 80px is half of the 160px width
Then give the circle half the height than the width. (80px, 160px)
After that I set the z-index:1; to be higher than -1 so you could see the circle.
Use text-align:center; to center the text.
I also replaced left:40% with left: calc((100% - 160px)/2); which will give you the exact center. (the whole width minus the width of the circle divided by 2)
Add line-height: 80px; to center the text vertically in the half circle
.box {
color:#fff;
height:auto;
position:relative;
z-index:0;
overflow:hidden;
max-width:586px;
}
.box:after {
content:'Yarn';
display:block;
height: 80px;
width:160px;
background-color:red;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
text-align:center;
line-height: 80px;
position:absolute;
bottom:-10px;
left:calc((100% - 160px)/2);
z-index:10;
}
<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>
I have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
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.
Im trying to put a background image over an image.
Basically its to show if a 'user' has approved or denied something.
I want if approved to display a green tick over the users display image.
I tried to create it but what i have does not work.
This is what i have so far:
Html
<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">
CSS
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.accepted{
background-image:url("tick.png") !important;
background-repeat:no-repeat;
background-position:right bottom;
z-index:100;
background-size:18px;
}
See jsfiddle for working example.
jsfiddle
The solution would be is to use wrapper with after pseudo element for accepted class:
.accepted:after {
content: '';
display: block;
height: 18px;
width: 18px;
position: absolute;
bottom: 0;
right: 0;
background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
background-repeat: no-repeat;
background-position: right bottom;
z-index: 100;
background-size: 18px;
}
HTML
<div class="small-profile-img accepted">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>
http://jsfiddle.net/vpgjr/7/
Background images go behind foreground content. An <img> is foreground content.
The only way you could see the background image would be if the foreground image had translucent pixels over the background image.
The tick appears to be content (rather than decoration) though, so it should probably be represented as an <img> anyway.
<div class="image-container">
<img class="small-profile-img"
src="http://www.image.com/image.gif"
alt="">
<img class="approved"
src="tick.png"
alt="Approved">
</div>
.image-container {
position: relative;
}
.image-container .small-profile-img {
position: relative;
z-index: 2;
}
.image-container .approved {
position: absolute;
z-index: 3;
top: 50px;
left: 50px;
}
Why dont you use position:absolute
HMTL
<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
<div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
</div>
CSS
.wrap{
position:relative;
background:red;
height:auto; width:30px;
font-size:0
}
.wrap > img{
width:30px;
display:inline;
}
.inner{
position:absolute;
top:30%;
left:50%;
margin:-5px 0 0 -9px
}
DEMO
set
position:absolute
Then set left,top (bottom,right if needed) property.
yea, i'd go the other way around.
change the class of the img when it's accepted.
HTML:
<div class='holder'>
<img class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">
</div>
CSS:
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.holder{
width:40px;
height:30px;
background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
background-size: 100%, 100%;
background-repeat:no-repeat;
background-position:center;
text-align: center;
}
.accepted{
border:none;
display:inline;
}
.unaccepted{
display:none;
}
This is my first time posting here. Been a long time fan coming here every once in a while, hopefully someone can lead me to the right direction. I have an image file that I am unable to move anywhere. The image file is in a div that is in a tag that I want positioned to the bottom right of the div. I have used top-margin and left margin to no avail it is always just sitting there in the same position. Below is the code that pertains to the problematic area. Html part followed by the css part.
<div id = "container">
<section id = "content">
<article>
<div id ="monkey_img"><img src="images/cartoon-monkey_1.png" width="250" height="252"></div>
</article>
</section>
<aside id="sidebar">
<p>Monkey</p>
</aside>
</div>
<!--css-->
#content{
width: 600px;
height: 475px;
background-color: #FFF;
border-style: solid;
border-width: 2px;
float:left;
margin-right:30px;
}
#monkey_img{
width:500px;
height:425px;
margin-top:100px;
margin-left:100px;
display:block;
}
#container{
width:1000px;
height:550px;
margin:auto;
margin-top:65px;
}
#container p{
padding:15px;
}
#sidebar{
width 275px;
height:475px;
background-color:#FFF;
border-style:solid;
border-width: 2px;
margin-left:30px;
overflow:auto;
}
You'll probably want to set {position: relative} on the parent, and {position: absolute} on the element you're trying to move. You can then set top/right/bottom/left as you see fit.
http://jsfiddle.net/XemPh/2/
#monkey_img {
width:200px;
height:200px;
background-color: #eee;
position: relative;
}
#monkey_img img {
position: absolute;
right: 0;
bottom: 0;
}
<div id="monkey_img">
<img src="http://placehold.it/100x100" />
</div>
In this example I've applied the styles directly to the image, but you could do the image's wrapper and that element's parent as well.