CODEWITHSUNDEEP
htmlcsshover
Pabloks
Pabloks

Reputation: 47

Hover effect on image with text

I don't know how to make text in the photo, and make a link in the whole photo. I've made a darkening effect which I don't want to change, I just want to add text to it. I really want to keep the current dimensions and, above all, responsiveness.

There is link to codepen: 'https://codepen.io/pawe-dejda/pen/XyPzpK'

body, html {
    height: 100%;
}

	.caption {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	color: #000;
}
	.responsive {
    width: 100%;
    max-width: 88px;
    height: auto;
	position: center;
}
.tz-gallery .row > div {
    padding: 2px;
	margin-bottom: 4px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
	opacity: 0.5;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dejda.e-kei.pl/nuar/css/style.css">

<div class="w3-container w3-padding-64 w3-black">
	<div class="w3-content">
	    <div class="tz-gallery">

        <div class="row no-gutters">
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
 
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
				
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">		
				</a>
              </div>
              </div>
              </div>
              </div>
			  </div>

Upvotes: 3

Views: 385

Answers (3)

emmaJNR
emmaJNR

Reputation: 67

.tz-gallery .row>div {
            padding: 2px;
            margin-bottom: 4px;
        }

        .tz-gallery .lightbox img {
            width: 100%;
            border-radius: 0;
            position: relative;
        }

        .img-text-box {

            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.479);
            color: #ffffff;
            width: 100%;
            padding: 20px;
            font-family: Arial;
            font-size: 17px;
        }

        .fade {
            opacity: 1;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
            color: #e9e9e9;
        }

        .fade:hover {
            opacity: 0.5;
        }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="tz-gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Be brave js is cool</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Readability counts.</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>If the implementation is hard to explain, it's a bad idea.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Kelvin
Kelvin

Reputation: 330

Here's an updated codepen

https://codepen.io/kelvinsusername/pen/YROYZM

It adds a container with some text in it but makes it opaque, then on hover instead of making it less visible (like the image) it makes it more visible.

.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}

Upvotes: 1

Kosem
Kosem

Reputation: 373

If i understand correctly, you want to be able to post links (link can be a-href, h1, h2, span etc') on top of your picture. To do so, do the following: 1. write a container div. for example:

<div>
text
</div>

  1. set its style (CSS) to the background picture you want. Make sure the div's sizes fit the picture size. Then, inside the div you can simply write down the tag you wish (text). for example:

    < span > text < /span >

Now things get interesting. In order to position the text inside the div? => set the div's position to relative (position:relative;) and set the span position to absolute. then play around with the top / left / bottom / right of the absoloute position, and text would appear whereever you want it to.

Upvotes: 2

Related Questions