크기 조정 이미지 링크에 늘이기 + 확대/축소 효과가없는 반응 형 이미지

Question

나는 모든 곳에서 답을 찾고 있으며 내 필요에 맞는 것을 찾을 수 없습니다. http://jsfiddle.net/Fran6/jbo5pfs4/3/

HTML : 나는 페이지에 배치 용기를

<div class="col1"> 
<img></img> 
<h1><a href="#">Title 1</a></h1> 
</div> 
<div class="col2"> 
<div class="box1"><img></img> 
    <h1><a href="#">Title 2</a></h1> 
</div> 
<div class="box2"><img></img> 
<h1><a href="#">Title 3</a></h1> 
</div> 
<div class="box3"><img></img> 
<h1><a href="#">Title 4</a></h1> 
</div> 
</div> 

를 그래서 나는 내가 무엇을 달성하고자하는 설명하기 위해 바이올린을 만들었습니다. 그들에는 심상이 있고 나는 그들을 기지개하지 않 싶으면. 실제로 배경 이미지보다는 같은 효과를 원합니다 : 표지. 그것이 나의 첫 번째 질문이다. 내가 제목으로 구현되는 링크를 통해 그것을 가져 가면

그럼, 이미지에 줌 효과를 가지고 싶습니다.

나는 이러한 것들을 따로 얻을 수 있지만 함께 할 수는 없다. 또한 HTML 대신 배경 이미지를 사용하기 시작했지만 확대/축소 효과를 사용할 수 없습니다.

누군가 내 문제를 해결하는 데 도움을 줄 수 있다면 매우 좋을 것입니다 !! :-)

고마워요!

Answer 1

나는 배경 이미지 : 표지를 완성 할 수있다. id가 'cover'인 html 태그를 만드십시오 ...

<div id="cover"> 
    <!-- content --> 
</div> 

그런 다음 CSS에서 다음을 수행해야합니다.

#cover { 
    padding: 0, 0, 0, 0; 
    background: url(http://placehold.it/300x150) top left no-repeat; 
    background-size: cover; 
    height: 300px; 
} 

확대/축소 효과를 수행한다고 상상해보십시오. 100 % 확실하지는 않지만 마우스를 올리면 사용할 수 있습니다. 희망이 있지만 도움이됩니다.