如何在絕對定位元素上從右向中心過渡？

我有一個覆蓋元素懸停在鼠標上，我想要<h3>標籤出現一個從右到中心的過渡，例如here。我只想要上面的鏈接所具有的轉換效果。任何人都請幫助我。提前致謝。如何在絕對定位元素上從右向中心過渡？

HTML

<div class="row mycustombox"> 
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;"> 
     <a href="#" class="customoverlay"> 
      <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;"> 
      <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;"> 
       <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3> 
      </div> 
     </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;"> 
     <a href="#" class="customoverlay"> 
      <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;"> 
      <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;"> 
       <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3> 
      </div> 
     </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;"> 
     <a href="#" class="customoverlay"> 
      <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;"> 
      <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;"> 
       <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3> 
      </div> 
     </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;"> 
     <a href="#" class="customoverlay"> 
      <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;"> 
      <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;"> 
       <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3> 
      </div> 
     </a> 
    </div> 
</div>

CSS

.customoverlay { 
    position:relative; 
} 
.customoverlay img { 
    margin:0; 
    padding:0; 
} 
.customoverlay .inneroverlaybox { 
    position:absolute; 
    background:#002137; 
    width:100%; 
    top:0; 
    left:0; 
    display:none; 
    overflow:hidden; 
} 
.customoverlay .inneroverlaybox h3 { 
    width:100%; 
    color:#fff; 
    margin:0; 
    padding:0; 
    position:absolute; 
}

的Javascript

<script type="text/javascript"> 

     jQuery(document).ready(function(){ 
      var windowWidth=jQuery(window).width(); 
      var columnPadding; 
      var imageHeight; 

      if(windowWidth<=320){ 
       columnPadding='3px';  
       imageHeight='65px'; 
      } 
      if(windowWidth>320 && windowWidth<=360){ 
       columnPadding='5px';  
       imageHeight='80px'; 
      } 
      if(windowWidth>360 && windowWidth<=480){ 
       columnPadding='7px'; 
       imageHeight='100px'; 
      } 
      if(windowWidth>480 && windowWidth<=768){ 
       columnPadding='7px'; 
       imageHeight='150px';     
      } 
      if(windowWidth>768 && windowWidth<=991){ 
       columnPadding='7px';  
       imageHeight='200px'; 
      } 
      if(windowWidth>991 && windowWidth<=1200){ 
       columnPadding='7px'; 
       imageHeight='250px';  
      } 
      if(windowWidth>1200){ 
       imageHeight='300px';  
      } 



      var getimagewidth=jQuery(".customoverlay").find('img').width(); 
      jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight); 
      jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding); 
      jQuery(".customoverlay").find('img').css('height',imageHeight); 
      jQuery(".customoverlay").find('.inneroverlaybox').css('height',imageHeight); 
      jQuery(window).resize(function() { 
      var windowWidth2=jQuery(window).width(); 
      var imageHeight2; 
      var columnPadding2; 

      if(windowWidth2<=320){ 
       imageHeight2='65px'; 
       columnPadding2='5px'; 
      } 
      if(windowWidth2>320 && windowWidth2<=360){ 
       imageHeight2='80px'; 
       columnPadding2='7px'; 
      } 
      if(windowWidth2>360 && windowWidth2<=480){ 
       imageHeight2='100px'; 
       columnPadding2='10px'; 
      } 
      if(windowWidth2>480 && windowWidth2<=768){ 
       imageHeight2='150px'; 
       columnPadding2='15px'; 
      } 
      if(windowWidth2>768 && windowWidth2<=991){ 
       imageHeight2='200px'; 
       columnPadding2='15px'; 
      } 
      if(windowWidth2>991 && windowWidth2<=1200){ 
       imageHeight2='250px'; 
       columnPadding2='15px'; 
      } 
      if(windowWidth2>1200){ 
       imageHeight2='300px'; 
       columnPadding2='15px';    
      } 

       jQuery(".customoverlay").find('img').css('height',imageHeight2); 
       jQuery(".customoverlay").find('.inneroverlaybox').css('height',imageHeight2); 
       jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding2); 
       jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight2); 
      }); 

      jQuery(".customoverlay").mouseover(function(){    
       jQuery(this).find('.inneroverlaybox').show(); 
       jQuery(this).find('.inneroverlaybox').css('transition','all .35s ease-in-out'); 
       jQuery(this).find('.inneroverlaybox').css('text-align','center'); 
       // jQuery(this).find('.inneroverlaybox h3').animate({"text-align":"center"}, 1000);    
      }); 
      jQuery(".customoverlay").mouseout(function(){ 
       jQuery(this).find('.inneroverlaybox').hide(); 
      }); 
     }); 
     jQuery(window).load(function(){ 
      var getimagewidth=jQuery(".customoverlay").find('img').width(); 
      var imageHeight; 
      var windowWidth=jQuery(window).width(); 
      var columnPadding; 

      if(windowWidth<=320){ 
       imageHeight='65px'; 
      } 
      if(windowWidth>320 && windowWidth<=360){ 
       imageHeight='80px'; 
      } 
      if(windowWidth>360 && windowWidth<=480){  
       imageHeight='100px'; 
      } 
      if(windowWidth>480 && windowWidth<=768){ 
       imageHeight='150px'; 
      } 
      if(windowWidth>768 && windowWidth<=991){ 
       imageHeight='200px';  
      } 
      if(windowWidth>991 && windowWidth<=1200){ 
       imageHeight='250px';  
      } 
      if(windowWidth>1200){ 
       imageHeight='300px'; 
       columnPadding='15px'; 
      } 


      jQuery(".customoverlay").parent("[class*='col-']").css('margin-bottom',columnPadding); 
      jQuery(".customoverlay").parent("[class*='col-']").css('height',imageHeight); 
      jQuery(".customoverlay").find('img').css('height',imageHeight); 
     }); 
     </script>

來源

2015-12-21 Nitin Johnson

你可以讓這部動畫與CS S3，這很簡單。懸停時，箱變的不透明度和文本移動到左邊，這樣， CSS：

.customoverlay { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 300px; 
} 
.customoverlay img { 
    margin: 0; 
    padding: 0; 
} 
.customoverlay .inneroverlaybox { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 300px; 
    opacity: 0; 
    overflow: hidden; 
    -webkit-transition: opacity 0.3s ease-in-out 0s; 
    -moz-transition: opacity 0.3s ease-in-out 0s; 
    -ms-transition: opacity 0.3s ease-in-out 0s; 
    -o-transition: opacity 0.3s ease-in-out 0s; 
    background: #002137; 
} 
.customoverlay .inneroverlaybox h3 { 
    position: relative; 
    left: 100%; 
    padding: 0; 
    margin: 0; 
    color: #fff; 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    -moz-transition: all 0.3s ease-in-out 0s; 
    -ms-transition: all 0.3s ease-in-out 0s; 
    -o-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 
.customoverlay:hover .inneroverlaybox { opacity: 1; } 
.customoverlay:hover .inneroverlaybox h3 { left: 0%; }

Codepen：http://codepen.io/AnTSaSk/pen/wMWzpj

來源

2015-12-21 11:12:12 AnTSaSk

如何在絕對定位元素上從右向中心過渡？

回答

相關問題