I have an image in the HTML that I want to slap a corner label with icon on when the user clicks on the image.
Could someone help me creating a css class that I can slap on to an to give it a corner label with an icon like shown in the attachment.
so my code would look as follows
<div>
<img src="blahblah.jpg">
<img src="another.jpg" class="image-label">
<i class="fa fa-heart"></i>
</div>
In this case the first image would appear as normal. The second one would have the corner label/icon combo as shown in the attached image.
Can someone tell me what image-label css class would put a corner with a background color (e.g. blue) and then put the font awesome 'heart' icon centered in that corner label/icon as shown in the image.
Thank you!
You're clearly using font awesome for the heart, so no need for another image. Use a div to hold the icon and position it with border-radius like this
.image-container{
width:200px;
height:200px;
position:relative;
margin:100px;
}
.image-container img{
width:100%;
height:100%;
object-fit:cover;
}
.image-label{
width:60px;
height: 60px;
display:flex;
justify-content:center;
align-items:center;
border-radius:100%;
background:skyblue;
font-size:30px;
position:absolute;
top:0;
right:0;
transform:translate(50%,-50%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="https://www.gqmiddleeast.com/sites/default/files/gqme/styles/766_431_landscape/public/images/2019/06/12/Tony-Stark.jpg?itok=7-QNeRCi">
<div class="image-label">
<i class="fa fa-heart"></i>
</div>
</div>
Hope this helps !
Related
I need to do a circle in HTML and a part of another circle that is located on this circle. Here is an example:
I need to do green and yellow areas. Without red area. Tell me please how should I do that. I could do green area with border-radius property and yellow area with clip-path property or there is a better way?
As far as I understand you want something like this.
Js fiddle
<div class="circle circle-green">
<div class="circle circle-red"></div>
</div>
.circle{
width:250px;
height:250px;
border-radius:50%;
}
.circle-green{
background:green;
overflow:hidden;
position:relative;
}
.circle-red{
background:red;
right:-60%;
position:absolute;
}
Everything should be explained in this jsfiddle.
Im so sorry, but I can't get the link to show. Its in the comments!
I can't get it to give me a red gradient over the image..
You'll need a wrapper around the image, but here is an example of how to set that up:
.imgWrap {position:relative; display:inline-block;}
.imgWrap img {display:block;}
.imgWrap:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:linear-gradient(transparent, red);}
.imgWrap:hover:after {display:none;}
<div class="imgWrap">
<img src="https://rocket-league.com//content/media/items/avatar/220px/75e8bb7e5d1473412157.png" />
</div>
I was asked to code an unusual shape background color on some centered text.
The text should be centered and it's background color should continue all the way right of the parent element.
Here is the desired output :
I have never seen anything like this so I don't even know where to start. Thank you for your help!
You can use a pseudo element to make the black background continue on the right :
DEMO
HTML :
<div>
<span>Some text with</span><br/>
<span>unusual background</span><br/>
<span>color</span>
</div>
CSS :
div{
float:right;
padding-right:150px;
text-align:center;
position:relative;
}
span{
display:inline-block;
background:#000;
color:#fff;
line-height:1.4em;
margin:0;
}
span:after{
content:'';
position:absolute;
width:200px;
height:1.4em;
right:0;
background:inherit;
z-index:-1;
}
I don't understand well your problem, but try to mix these concepts:
HTML:
<div id="parent">
<p id="son">Some text with unusual background color</p>
</div>
JS:
<script type="text/javascript">
document.getElementsById("parent").style.background="red";
document.getElementsById("son").style.background="blue";
</script>
try to change the son and the parent colors.
Background
I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using display:inline-block. The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels.
What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.
Here's an example of where I am right now: http://jsfiddle.net/shaunp/HvZ5p/
The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?
HTML
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
CSS
body {
overflow:hidden;
margin:0 50px 0 50px;
}
.vcCaption {
text-align:center;
font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
color:#000;
margin-bottom:5px;
}
.inline {
display:inline-block;
}
.bg-thumb {
width:250px;
height:170px;
}
.bg-thumb {
text-align:center;
display:table;
margin-bottom:5px;
}
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
}
.thumbImg {
max-width:240px;
max-height:160px;
}
Add vertical-align:top to your thumbnails:
.thumbImg {
max-width:240px;
max-height:160px;
vertical-align:top;
}
jsFiddle example
The default value of vertical-align is baseline, but for your needs you'll want the images to align to the top.
Another option would be to set the font size to zero on the containing div like:
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
font-size:0;
}
jsFiddle example
Adding vertical-align: middle; to your image will solve that.
.thumbImg {
vertical-align: middle;
max-width:240px;
max-height:160px;
}
the anchor tag is by default an inline element which gives it extra spacing, set it to a block element and give it some width and height!
.cell-thumb a {
display: block;
width: 240px;
height: 160px;
}
Images will by default display as inline-block (http://dev.w3.org/html5/markup/img.html#img-display) meaning that they will sits on an inline level block - or text line if you prefer.
Either set the font-size and/or line-height to 0 or in this case simply set the image to display at block level (display: block;).
I have been searching the web but can't find the answer. Is it possible to overlay or embed a bootstrap button over/in an image? If so, how?
I have a image that I want to overlay a bootstrap button over so it looks like it is embedded in the image. I would like the button to have a dynamic label on it(for ex. somebody's name).
Stano answered the question for me!
"...yes the button can be positioned above the image tag, for example like this: http://jsfiddle.net/ubWuX"
HTML:
<div id="img_container">
<img src="http://jsfiddle.net/img/initializing.png"/>
<button class="button"> click here </button>
</div>
CSS:
#img_container {
position:relative;
display:inline-block;
text-align:center;
border:1px solid red;
}
.button {
position:absolute;
bottom:10px;
right:10px;
width:100px;
height:30px;
}