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>
Related
I am facing issue making text around the borders of a div, with dynamic content/images.
Here is html code:
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
css:
.fp-wrapper {
position: relative;
display: inline-block;
margin: auto;
}
.fp-image {
width: 80%;
float:left;
padding: 10px;
border: 1px solid #53565a;
z-index: 1;
}
.fp-title1, .fp-title2{
padding: 0 10px;
background: #fff;
position: absolute;
top: 0;
left: 30px;
color: #53565a;
text-transform: uppercase;
font-weight: 500;
}
.fp-title2 {
bottom: 50%;
top: unset !important;
transform: translate(-50%,-50%) rotate(-90deg);
}
Fiddle: https://jsfiddle.net/wutzbvef/
Now the problem is that the content is dynamic, so min-height/max-height or negative margins won't work (I think so). Also I need to make it responsive, covering the border. Is this approach correct or need to make it by some other approach. Please help.
Edit:
I may not explained better, but I basically want to vertical align top the -90deg rotated paragraph i.e. .fp-title2
Use transform-origin
.fp-wrapper {
position: relative;
display: inline-block;
margin-left: 50px;
}
.fp-image {
width: 100%;
padding: 10px;
border: 1px solid #53565a;
z-index: 1;
}
.fp-title1,
.fp-title2 {
padding: 0 10px;
background: #fff;
position: absolute;
top: 0;
left: 30px;
color: #53565a;
text-transform: uppercase;
font-weight: 500;
}
.fp-title2 {
transform: translate(-100%, 0%) rotate(-90deg);
transform-origin: right center;
}
.w2 .fp-image {
width: 80%;
}
.w3 .fp-image {
width: 60%;
}
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
<div class="fp-wrapper w2">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
<div class="fp-wrapper w3">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
Try rotating first, then re-center the div. Otherwise it's ok.
transform: rotate(-90deg) translate(-50%, -50%);
You can also use a variable font-size for smaller images.
(I would also use an :after class for this btw), use the a tag, like this:
.fp-wrapper {
}
.fp-wrapper a {
width: 40%;
display:inline-block;
position: relative;
z-index:1;
float:left;
padding: 10px;
border: 1px solid #53565a;
}
.fp-image {
width: 100%;
}
.fp-wrapper a:before{
position: absolute;
content:'text top';
padding: 0 10px;
background: #fff;
display:inline-block;
top: 0px;
left: 50%;
transform: translateX(-50%);
color: #53565a;
text-transform: uppercase;
font-weight: 500;
z-index:20;
}
.fp-wrapper a:after {
position:absolute;
content:"left text";
display:inline-block;
text-transform: uppercase;
font-weight: 500;
padding: 0 10px;
top:50%;
transform: translateX(-50%) rotate(-90deg);
left:10px;
z-index:10;
background-color:#fff;
}
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
</div>
<div class="fp-wrapper">
<a href="/url1" style="width:30%;">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
</div>
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 would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>
You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</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'); }
I have added a My account link and a wishlist link to my header. It shows fine on the home page but when I go on to any other page, the images are no longer displayed, all I see is the Alt text.
Can someone help me tweak my code so that the same images are shown properly on all pages? :-)
I have tried to do it so that the pictures change color on hover by having one image below the other...
PHP:
<div id="myaccount">
<a href="wordpress/my-account"><img class="bottom" src="wp-
content/themes/mt_theme/images/my_account_hover.png" alt="My
Account"/>
<img class="top" src="wp-content/themes/my_theme/images/my_account.png" alt="My Account"/>
<p class="icotext">My Account</p>
</a>
</div>
<div id="wishlist">
<a href="wishlist"><img class="bottom2" src="wp-content/themes/smy_theme/images/wishlist_hover.ico" alt="Wishlist"/>
Wishlist
CSS:
#myaccount{
position: relative;
margin: 0 auto;
}
#myaccount img {
position:absolute;
left:900px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
a:hover img.top {
opacity:0;
}
.icotext{
position: absolute;
left: 890px;
top: 28px;
color: #000000
}
a:hover .icotext{
font-weight: bold;
left: 888px;
}
#wishlist{
position: relative;
margin: 0 auto;
}
#wishlist img {
position:absolute;
left:990px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
.icotext2{
position: absolute;
left: 992px;
top: 28px;
color: #000000
}
a:hover .icotext2{
font-weight: bold;
left: 990px;
}
a:hover img.top2 {
opacity:0;
}
img.bottom2 {
opacity:0;
}
a:hover img.bottom2 {
opacity:1;
}
img.bottom {
opacity:0;
}
a:hover img.bottom {
opacity:1;
I'm guessing the other pages are trying to get the images from another folder.
src="wp-content/themes/my_theme/images/my_account.png"
You are using a relative address that is interpreted as "{current folder}/wp-content/..."
Try using
src="/wp-content/themes/my_theme/images/my_account.png"
The / on the front will be interpreted as "{site_root}/wp-content/..."