Como fazer o efeito abaixo aos poucos,de acordo com a resolução da tela.
*Sem usar clip, pois senão seriam muitas media queries, e neste site, o efeito parece uma transição suave.
CSS:
/* lista de notícias */
.chamada {
border-bottom: 1px dotted #ccc;
display: block;
margin-bottom: 1em;
padding-bottom: 1em;
text-decoration: none;
width: 100%;
overflow: hidden;
}
.chamada:last-child {
border-bottom: 0;
}
.chamada img {
border-radius: 5px;
display: block;
float: left;
margin-right: 0.8em;
}
.chamada.mini img {
margin-bottom: 0.4em;
}
.chamada:hover h2 {
text-decoration: underline;
}
.chamada.principal h2 {
font-size: 1.8em;
line-height: 1.05;
}
.chamada.normal h2 {
font-size: 1em;
}
.chamada.secundaria h2 {
font-size: 0.6em;
}
.chamada.mini {
padding-right: 0.35em;
}
:not(.mini) .chamada.mini + .mini {
padding-left: 0.35em;
padding-right: 0;
}
/* direita da TV */
.chamada.tv {
border: 1px solid #ccc;
border-radius: 5px;
}
.tv img {
border-radius: 3px 3px 0 0;
margin-top: -1px;
}
.tv p {
clear: both;
color: #999;
padding: 1.4em 1em 0.25em;
}
.tv h2 {
padding: 0 1em;
margin: 0;
border: 0;
}
.tv .bolinha {
display: inline-block;
border-radius: 50%;
background: #aaa;
height: 7px;
width: 7px;
margin-top: 1.4em;
}
.tv .bolinha:first-of-type {
background: #555;
margin-left: 1.5em;
}
HTML
<a href="video.html" class="tv chamada normal famosos">
<img src="img/tv1.jpg" alt="Roupão">
</a>
*As classes também são utilizadas por outros elementos dentro do link
Donwload do projeto:
background
do elemento e definirbackground-size: cover
? Com html e css... acho que vai ser preciso gambiarra :) coloca a parte relevante do html também.