CODEWITHSUNDEEP
htmlcss
Ferdinand Co Receno
Ferdinand Co Receno

Reputation: 25

How to put text below images

I am trying to make the text appear below the zoomed images but they keep on appearing at the back and the images seem to eat up all the space in the post body.

When I try to use <p></p> , the text is outside of the text body.

I use a Blogger blog and I just copied the code from Krz Szzz codepen: https://codepen.io/ccrch/pen/yyaraz.

HTML

<div class="tiles">
    <div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
    <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
    <div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>

CSS 

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
    body {
        background: #fff;
        color: #000;
        margin: 0;
    }

    .tiles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .tile {
        position: relative;
        float: left;
        width: 33.333%;
        height: 100%;
        overflow: hidden;
    }

    .photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: transform .5s ease-out;
    }

    .txt {
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: 10%;
        left: 0;
        font-family: 'Roboto Slab', serif;
        font-size: 9px;
        line-height: 12px;
        text-align: center;
        cursor: default;
    }

    .x {
        font-size: 32px;
        line-height: 32px;
    }

Upvotes: 0

Views: 585

Answers (2)

Chintan Amrutia
Chintan Amrutia

Reputation: 311

Please check in full view 

$('.tile')
    // tile mouse actions
    .on('mouseover', function(){
      $(this).find('.photoin').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
    })
    .on('mouseout', function(){
      $(this).find('.photoin').css({'transform': 'scale(1)'});
    })
    .on('mousemove', function(e){
      $(this).find('.photoin').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    })
    // tiles set up
    .each(function(){
      $(this)
        // add a photo container
        .append('<div class="photo"><div class="photoin"></div></div>')
        // some text just to show zoom level on current item in this example
        .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
        // set up a background image for each tile based on data-image attribute
        .find('.photoin').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
	  
    })
body { margin:0; padding:0;}
		body {
    background: #fff;
    color: #000;
    margin: 0;
  }

  .tiles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .tile {
    position: relative;
    float: left;
    width: 33.333%;
    height: 100%;
    overflow: hidden;
  }
	.photoin { position:absolute; left: 0; right: 0; bottom: 0; top: 0;  background-repeat: no-repeat;
    background-position: center;
    background-size: cover; transition: transform .5s ease-out;}
  .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom:150px; overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-out;
  }

  .txt {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 50px;
    left: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    cursor: default;
  }

  .x {
    font-size: 32px;
    line-height: 32px;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="tiles">
    	<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
    	<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
    	<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
  	</div>

Please check in full view

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Added these 2 styles with new properties

  .photo {
    height: 80%;
  }

  .txt {
    bottom: 0;
  }

Removed absolute, top, bottom from the following

.photo {
    width: 100%;
    height: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-out;
  }

  .txt {
    position: relative;
    z-index: 2;
    font-family: 'Roboto Slab', serif;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    cursor: default;
  }

See updated coedpen

 

  @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);

  body {
background: #fff;
color: #000;
margin: 0;
  }

  .tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
  }

  .tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
  }

  .photo {
width: 100%;
height: 80%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
  }

  .txt {
position: relative;
z-index: 2;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
  }

  .x {
font-size: 32px;
line-height: 32px;
  }
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
  </div>

<script>

  $('.tile')
// tile mouse actions
.on('mouseover', function(){
  $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
  $(this).children('.photo').css({'transform': 'scale(1)'});
})
.on('mousemove', function(e){
  $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
// tiles set up
.each(function(){
  $(this)
    // add a photo container
    .append('<div class="photo"></div>')
    // some text just to show zoom level on current item in this example
    .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
    // set up a background image for each tile based on data-image attribute
    .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
})

</script>

Upvotes: 1

Related Questions