Trying to get span element to display in the center of my image to create an interactive button. Span class is "plus_own" element displays in left corner of the image.
.plus_own {
font-size: 70px;
color: white;
font-family: unc;
position: relative;
font-weight: bold;
top: -30px;
transition: all 0.4s ease;
}
Centered span class element trying to create an interactive button.
I would recommend taking a look at this to get a better understanding of how this works.
How I would recommend to do it is something like this:
.container {
position: relative;
text-align: center;
color: white;
}
.plus_own {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-weight: bold;
}
<div class="container">
<img src="https://cdn.shopify.com/s/files/1/1330/4567/files/DSC_0838_1024x1024.jpg?v=1522089465" style="width:100%;">
<span class="plus_own">Some Text</span>
</div>
Related
I want the link to cover all images, not only at the center but when you have the mouse over the image.
.moduledata{
position: relative;
width: auto;
margin: 0px !important;
max-width: 380px;
}
.moduledata > h5 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.moduledata > h5 > a {
color: #000000;
font-weight: 300;
font-size: 38px;
}
.moduledata:hover h5 {
visibility: visible;
}
.moduledata h5 {
visibility: hidden;
}
<div class="moduledata">
<h5>{{title}}</h5>
<figure><img src="{{pageThumb}}"/></figure>
</div>
You can wrap your image inside a link so you can click everywhere on the image to follow the link.
#comehere {
margin-top: 2000px;
}
<img src="https://via.placeholder.com/150x150" alt="">
<div id="comehere">here</div>
I can't get the hover effect right. I have a block with a picture and text in it. When hovering over the picture - should change the fill, filter: brightness. It does, but if I hover over the text which is in the middle of the picture, the text overlaps the picture and the hover effect doesn't work. If I put filter: brightness on the whole block, not only on the image, then the text gets filled too and becomes black. And my task is to change only the color of the picture, but not the text. What am I doing wrong?
.blocks
h5
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block
text-align: center;
color: white;
font-size: 18px;
img
filter: brightness(0.28)
&:hover
filter: brightness(0.7)
please make sure to put your relevant code (HTML and CSS) into an Stack-Snippet, so everyone here can easy reproduce the problem!
If you want to change the IMG-style when hovering the parent-element, use .parentElementClass:hover img{}
.blocks {
position: relative;
display: inline-block;
width: 150px;
}
.blocks h5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
text-align: center;
color: white;
font-size: 18px;
z-index: 2;
}
.blocks img {
filter: brightness(0.28);
z-index: 1;
}
.blocks:hover img {
filter: brightness(0.7);
}
<div class="blocks">
<h5>headline 5</h5>
<img src="https://via.placeholder.com/150/000000/" />
</div>
I built a simple countdown timer in HTML and now I am looking to put all the text on top of an image. So the image is in the background and the text on top of it.
It's an image of a mac screen and I want text to be inside of the screen if that makes sense :)
Code:
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="Images/mac.png" class="img-responsive" alt="Responsive image">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
<div class="centered">
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Because the image has a z-index of -1, it will be placed behind the text.
you could use background image, correct me if I misunderstood your question
<div class="macPic" class="background-image: url("Images/mac.png");">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
Two possible solutions:
(1) Set your image as background image for div class="macPic":
.macPic {
background-image:url('Images/mac.png');
}
(2) Use positioning as explained here to let the text float on top of the image:
.macPic { position:relative; }
.time-to { position: absolute; }
.img-responsive { position: absolute; }
Do as follow
.macPic {
position: relative;
}
.time-to {
position: absolute;
/* You can replace * with any value that you like */
top: *px;
bottom: *px;
right: *px;
left: *px;
}
Try this CSS...
.time-to{
position:absolute;
top:50%;
left:10%;
}
Put mac.png image into css folder and add this code to your external file
.macPic { background-image:url('Images/mac.png'); }
What is happening
What I want to happen
I want the icon-x-circle to be horizontally centered and on the same line as "Rename" but be right-aligned (probably 30px away from the right end of the header). If someone could let me know how to do that it would be greatly appreciated!
Something to note:
The icon-x-circle itself is not centered. For some reason Fontastic icons seem to add extra space at the bottom. So this is another reason why I'm struggling to horizontally center icon-x-circle.
My Code
HTML
<div id="popup-rename" class="overlay">
<div class="popup">
<header>
<h1>Rename</h1>
<a class="close icon-x-circle" href="#"></a>
</header>
<div class="content">
<div class="student-name student-rect">
<h1>Student Name</h1>
</div>
<div class="save-button center-children">
<a class="save icon-check-circle" href="#"></a>
</div>
</div>
</div>
</div>
CSS
header{
background-color: #F5F5F5;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
text-transform: uppercase;
}
header h1 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: 300; /*100, 200*/
}
.icon-x-circle{
color: #E1E1E1;
}
.overlay {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
background: white;
width: 50%;
position: relative;
transition: all 200ms ease-in-out;
}
.popup header{
padding: 20px;
}
.close, .save{
transition: all 200ms;
}
.icon-x-circle:hover {
color: #B6B6B6;
}
JSFiddle
One method for aligning elements is to use position: absolute;:
.icon-x-circle {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
You can use absolute positioning and put the button wherever you want.
first, make header a relative container
header{
position: relative;
}
Then you can make the button absolute
header a{
position: absolute;
right: 30px;
top: 10px
}
You can mess with right and top to move the button wherever.
https://jsfiddle.net/49abesy2/1/
I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!
I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html
Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>