2014-06-11 3 views
0

블로거 닷컴을 사용하여 블로그 용 이미지 페이지를 만들려고합니다. 핵심은 사진 위에 마우스를 올려 놓았을 때 텍스트 위에 표시되도록하고 싶다는 것입니다. 내가 this post 코드를 사용하여이 작업을 수행하는 방법을 알아 냈습니다. (나는이 서식에 적절한 서식을 넣을 수 없었다.)블러거에 마우스를 가져 가면 한 글자에 두 개의 이미지가 생성됩니다.

그러나 나는 HTML을 잘하지 못했고, 실제로하고 싶은 것은 두 줄의 사진이 같은 줄에와 함께있다. 이 효과. 아무도 이것이 일어나는 방법을 알고 있습니까? 그렇지 않다면 페이지에 이미지의 중심을 맞추는 방법을 아는 사람이 있습니까?

(가능하지 않은 경우 캡션이있는 동일한 줄에 두 개의 이미지를 가져 오는 방법은 같은 줄에서 두 개의 이미지를 가져올 수 있지만 캡션을 추가하면 두 번째 그림이 새 줄로 표시됩니다.)

당신이 이미지에 마우스 오버 효과를 추가하는 간단한 방법이 있다면, 나는 많은 이미지가 계획대로 내가 이상적으로 각 이미지에 대해이 많은 코드를 가지고 좋아하지 않을로 알려 주시기 바랍니다

답변

0

이것은 분명히 서로 옆에 두 개의 이미지를 가져올 것입니다. 이 DEMO을 확인하십시오. 그것은 당신이 심상으로 필요로 한 자막뿐만 아니라 공중 선회를 가지고 있습니다.

<table> 
<tr><td> 
<div class="imgWrap"> 
    <img src="sample1.jpg" /> 
    <p class="imgDescription">First Image text.</p> 
    <span style="font-size: small;">Caption text 1</span> 
</div> 
    </td> 
    <td><div class="imgWrap"> 
    <img src="sample2.jpg" /> 
    <p class="imgDescription">Second image text</p> 
    <span style="font-size: small;">Caption text 2</span> 
</div></td> 
</tr> 
    </table>