Difference between revisions of "Team:Bordeaux/Problem"
Line 9: | Line 9: | ||
a:hover {color: #ffaf59;} | a:hover {color: #ffaf59;} | ||
− | . | + | .fader { |
− | width: | + | /* Giving equal sizes to each element */ |
− | height: | + | width: 250px; |
− | + | height: 375px; | |
− | + | ||
− | + | /* Positioning elements in lines */ | |
− | + | display: inline-block; | |
− | + | ||
− | + | /* This is necessary for position:absolute to work as desired */ | |
− | + | position: relative; | |
− | } | + | |
− | . | + | /* Preventing zoomed images to grow outside their elements */ |
− | + | overflow: hidden; } | |
− | + | ||
+ | |||
+ | .fader img { | ||
+ | /* Stretching the images to fill whole elements */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | |||
+ | /* Preventing blank space below the image */ | ||
+ | line-height: 0; | ||
+ | |||
+ | /* A one-second transition was to disturbing for me */ | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; } | ||
+ | |||
+ | .fader img:hover { | ||
+ | /* Making images appear bigger and transparent on mouseover */ | ||
+ | opacity: 0.5; | ||
+ | width: 120%; | ||
+ | height: 120%; } | ||
− | |||
p.reference {line-height: 105%; font-size: 97%} | p.reference {line-height: 105%; font-size: 97%} | ||
Line 56: | Line 76: | ||
<div class="col-lg-3"> | <div class="col-lg-3"> | ||
<br> <br> <br> | <br> <br> <br> | ||
− | <img class =" | + | <img class ="fader" ; style="width:20vw;height:25vw" src="https://static.igem.org/mediawiki/2015/thumb/7/75/Bordeaux_parcels.png/484px-Bordeaux_parcels.png"> |
<p class="reference" align ="justify"> <b> Figure 4: Effect of treatment with copper sulfate on infection by Downy mildew </b> </p> | <p class="reference" align ="justify"> <b> Figure 4: Effect of treatment with copper sulfate on infection by Downy mildew </b> </p> | ||
Revision as of 18:54, 3 August 2015