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;
}
Related
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 !
So I was just testing phone functionality for my site. It operates as expected (ie the logo is at the top), but when clicked through as a link from instagram it displays as below. Is it something to do with the bar that is displayed in the link from instagram?
Jsfiddle
html
<div class="Rad_title_container">
<div class="Rad_title">
<svg>
</svg>
</div>
</div>
css
.Rad_title_container{
width:100%;
}
.Rad_title {
padding-top:2%;
padding-left:17.5%;
z-index:3;
position:fixed;
width:65%;
pointer-events:none;
}
It seems it didn't like position:fixed. I had to add a max height as well because it was doing something funky like expanding the height to 200%. No idea what was going on.
.Rad_title_container{
position:absolute;
width:100%;
z-index:3;
}
.Rad_title {
padding-top:2%;
position:relative;
width:65%;
pointer-events:none;
text-align:center;
margin:auto;
max-height:10vh;
overflow-y:none;
}
Is it possible to load a external css "specific some lines" in a html?
For example : I have a page with some div, and i want the page load only specific some lines from css, not entire css, see snippet below. Are there have some way to show only div1 and div2 style, not all four ?
.class1 {
background-color:#FC0;
width:300px;
height:50px;
}
.div1 {
background-color:#CCC;
width:300px;
height:50px;
}
.class2 {
background-color:#F00;
width:300px;
height:50px;
}
.div2 {
background-color:#FFC;
width:300px;
height:50px;
}
<div class="class1">class1 text (I don't want this css)</div>
<div class="div1">div1 text</div>
<div class="class2">class2 text (I don't want this css)</div>
<div class="div2">div2 text</div>
Separate your css files, and link to only the css file containing the css you need.
Is there a way to make a text appear on an embed image?
[That text appears when the cursor hovers over the image]
https://css-tricks.com/text-blocks-over-image/
You can use the :hover selector in the css to make your text appear when the mouse hovers over the image
Without any examples, yes. Your image and text should be different entities, in that CSS should be able to reference them distinctly. Then you can just do something like this.
#your-text-elements-id:hover {
visibility: "visible"
}
#your-text-elements-id {
visibility: "hidden"
}
you can use the below code to make text appear on cursor hover the image
.texthover {
width:100%;
display:block;
position:relative;}
.texthover .overlay {
position:absolute;
top:25%;
height:50%;
padding:10px;
display:none;
}
.texthover:hover .overlay {
display:block;
}
<div class="texthover"><br />
<img src="https://lh3.googleusercontent.com/U2R2BfwOe-ZiqI1gSgmTpZPDkWBNacaO8_HZkKkVee-wHlHV505gmX91DZnq-dYbzY96" height="50%" width="50%"/>
<div class="overlay"><br />
<h1>Ashok Purohit</h1></div>
</div>
I am completely new to web design and I just cant seem to accomplish what is in the picture below. Even if you could tell me what this layout is called so I could google for suggestions it would be great
Thanks in advance
Well, you could start with a container div. Then add in a 'box' div with a set width. if you float those divs to the left they will align as such in the container. Then you can add the framework for the items inside the boxes.
#container {
width:500px;
background-color:#CCC;
}
.box {
width:50%;
float:left;
min-height:120px;
}
.boximg {
// this is your icon for each box
width:20px;
float:left;
display:inline;
}
.boxtitle {
font-weight:bold;
float:left;
display:inline;
}
Then your HTML:
<div id="container">
<div class="box">
<div class="boximg"><img src=""/></div>
<span class="boxtitle">Here is your box title</span>
<p>Your box text here</p>
</div>
<!-- add more boxes here -->
</div>
This is just a general hint. For nice grid based designs, you can google for css frameworks.
Here are some sample pages:
http://www.blueprintcss.org/tests/parts/sample.html
http://elasticss.com/demos/Examples_Columns.html
http://960.gs/demo_24_col.html
It's the Leverage theme from ThemeTrust.