I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
Related
This question already has answers here:
Absolute position is not working
(6 answers)
Closed 10 months ago.
Trying to center text over image in HTML, but my method keeps pushing the text to the very beginning of the page at the top. My method is below...
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
because .map-section needs to have position: relative
long answer:
in order for position absolute to use the reference of the parent. the parent needs to have position: relative
so adding
.map-section: { position: relative };
and fix the transform, should be
transform: translate(50%, -50%);
will get what you want
Two things:
1.) Set position: relative to the parent element (.map-section) to make it the reference for the absolutely positioned element.
2.) (optionally?) Limit the size of your image to its container's width and add height: auto to keep the proportion:
#map {
width: 100%;
height: auto;
}
.map-section {
position: relative;
}
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
It should be like that
For more info : https://www.w3schools.com/css/css_positioning.asp
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
color: black;
position: relative;
z-index: 1;
}
.map-section{
position: relative;
}
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
I'm trying to make a circle-shaped image with an overlay that shows on hover. However, the "hitbox" of hovering (and clicking) is incorrect, as shown in the snippet below.
This issue seems to only occur in Chrome (not sure about Safari). I've found some fixes on the Internet, but none of them worked. JSFiddle for testing
$(document).ready(function() {
$(".circle").click(function() {
alert($(this).attr("id"));
});
});
#canvas {
width: 100%;
padding-bottom: 75%;
position: relative;
overflow: hidden;
background-color: #eee;
}
.circle {
position: absolute;
width: 25%;
padding-bottom: 25%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
cursor: pointer;
/*https://stackoverflow.com/a/32987370/5532169*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
/*https://stackoverflow.com/a/25206004/5532169*/
z-index: 1;
/*https://stackoverflow.com/a/10296258/5532169*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
/*https://stackoverflow.com/a/16878347/5532169*/
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.mid {
width: 100%;
height: 100%;
position: absolute;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.inner>* {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.hover {
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 0.5s;
}
.hover:hover {
opacity: 100;
transition: opacity 0.5s;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72%;
text-align: center;
font-family: monospace;
font-size: 2em;
font-weight: bold;
color: #08f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
<div id="div1" class="circle">
<div class="mid">
<div class="inner">
<img src="https://dummyimage.com/320x320/000/fff" alt="">
<div class="hover">
<span>Hello World!</span>
</div>
</div>
</div>
</div>
</div>
Edit: Tested in Firefox 57, works without problem. IE and Edge were tested already, so it's a Chrome-/webkit-specific issue.
The blocks in HTML are square defined by position (x, y) and size (width, height) so the browser can have a simplified idea of what is on the page and interact with. So even with border-radius, mask-image, etc... your .circle div is still a square with coming drawn within.
To avoid that, you can't use a dynamic selector like :hover because it will use the shape of the div and that is a square. You need to use javascript to detect mouse position when hovering your block and with that execute an animation (with sinus and cosinus calculation).
You can get the mouse position with something like this :
<div class="circle" onmouseover="hoverFunction(e)"></div>
<script>
function hoverFunction(e) {
var x = e.clientX;
var y = e.clientY;
}
</script>
I also found this topic talking about getting elements position on the page.
You can change only .circle class these properties:
width: 26%;
padding-bottom: 26%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.
I currently have an ng-repeat that looks like this:
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}"/>
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
Here is the CSS pulled from this codePen:
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-right{
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green{background: #2c7;}
I am trying to figure out how to get the ribbon to be restricted to the wrapper class. Does anyone know how I can do that? so I'm still using the same ribbon, but instead of being in the bottom right of the screen, it is at the bottom right of the image for which it applies?
you need to use relative/absolute position and reset display of .wrapper to shrink on image. Then add overflow:hidden to cut off edges of ribbon:
.corner-ribbon {
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky {
position: absolute;
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.corner-ribbon.bottom-right {
top: auto;
right: -50px;
bottom: 30px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green {
background: #2c7;
}
.wrapper {
position: relative;
display: table-cell;/* or inline-block or float */
overflow: hidden;
}
img {
display: block;
}
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}" src="http://lorempixel.com/300/200" />
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
The class has fixed positioning.
.corner-ribbon.sticky{
position: fixed;
}
So for exact css you may not be able to attach ribbon to each img, rather ribbon would go to specific place in window only. However, you can adjust css a bit. Make wrapper class relative, and .corner-ribbon.sticky absolute position. Then adjust your css fot top/bottom/left/right properties to align them.
.wrapper{
position: relative;
}
.wrapper .corner-ribbon.sticky{
position: absolute;
/* put top/bottom/left/right values here*/
}