html - Effect image on hover with css -

-

i trying animated image on hover. result want have similar 1 : see here ( scroll see image "our team" )

so, want have background display information ( name, links) in theme can't achieve it.

here code :

<div class="row">   <div class="col-md-6">             <div class="picture">       <div class="photoapropos center-block">         <div class="info">           <img class="img-responsive img-circle" alt="name" src="<?= $url; ?>"/>           <p>name</p>         </div>       </div>         </div>     </div> </div>

and css :

.picture {   display: block;   opacity: 1; } .photoapropos{   display: block;   position: relative;   width: 425px;   height: 425px;   -webkit-transition: 0.4s ease-in-out;   -moz-transition: 0.4s ease-in-out;   -o-transition: 0.4s ease-in-out;   -ms-transition: 0.4s ease-in-out;   transition: 0.4s ease-in-out; } .photoapropos:hover .info {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -o-transform: scale(1);   -ms-transform: scale(1);   transform: scale(1);   opacity: 1; } .photoapropos .info {   position: absolute;   background: #ff8c00;   width: inherit;   height: inherit;   border-radius: 50%;   opacity: 0;   -webkit-transition: 0.4s ease-in-out;   -moz-transition: 0.4s ease-in-out;   -o-transition: 0.4s ease-in-out;   -ms-transition: 0.4s ease-in-out;   transition: 0.4s ease-in-out;   -webkit-transform: scale(0);   -moz-transform: scale(0);   -o-transform: scale(0);   -ms-transform: scale(0);   transform: scale(0);   -webkit-backface-visibility: hidden; }

can me because feature seemed easy realise don't see missing ?

thanks.

    .picture {            display: block;          opacity: 1;          background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');          border-radius: 50%;          height: 425px;          width: 425px;      }        .photoapropos{          display: block;          position: relative;          width: 425px;          height: 425px;          -webkit-transition: 0.4s ease-in-out;          -moz-transition: 0.4s ease-in-out;          -o-transition: 0.4s ease-in-out;          -ms-transition: 0.4s ease-in-out;          transition: 0.4s ease-in-out;        }        .photoapropos:hover .info{              -webkit-transform: scale(1);          -moz-transform: scale(1);          -o-transform: scale(1);          -ms-transform: scale(1);          transform: scale(1);          opacity: 1;      }        .photoapropos .info {          position: absolute;          /*background: #ff8c00;*/          width: inherit;          height: inherit;          border-radius: 50%;          opacity: 0;          -webkit-transition: 0.4s ease-in-out;          -moz-transition: 0.4s ease-in-out;          -o-transition: 0.4s ease-in-out;          -ms-transition: 0.4s ease-in-out;          transition: 0.4s ease-in-out;          -webkit-transform: scale(0);          -moz-transform: scale(0);          -o-transform: scale(0);          -ms-transform: scale(0);          transform: scale(0);          -webkit-backface-visibility: hidden;          text-align: center;            background: rgba(82, 219, 235, 0.8);          color: #fff;      }        .photoapropos .info p {          margin-top: 50px;      }
<div class="row">      <div class="col-md-6">          <a class="picture" href="<?= $url; ?>">              <div class="photoapropos center-block">                  <div class="info">                      <p>name</p>                  </div>              </div>          </a>      </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more