따라서 Custom Fields 및 Twig를 사용하여 워드 프레스에서 3 개의 게시물을 가져 오는 div 플렉스가 있습니다.
이미지, 제목을 얻고 div 내부에 표시합니다. 모두 좋습니다. 이제 다음 예를 들어 보겠습니다. 마우스가 이미지 위로 이동하면 이미지가 점차 아래 부분을 잃고 포스트 오더와 함께 제목이 표시됩니다. mouseover, hover 및 기타 항목을 시도했지만 작동하지 못했습니다. 그러니 먼저 확인해보세요. 이것은 친구가 만든 모델입니다.
이건 제가하고 싶은 것인데, 제 프로젝트는 제목이 이미지 아래에 있고 순서 (01, 02, 03)가 표시되지 않는다는 차이점이 있습니다. 여기에서 현재 상태를 확인하십시오.
이것은 워드 프레스에서 게시물을 가져 오는 데 사용되는 코드입니다.
/* Main file code : */
{% for post in homeserviceposts %}
{% include 'category.twig' %}
{% endfor %}
/* Imported file code: */
{% block content %}
<a title="{{post.title}}" href="{{post.link}}">
{% if post.thumbnail.src %}<img class="img-responsive post-image" src="{{post.thumbnail.src}}"/> {% endif %}
<h2 class="post-title">{{post.title}}</h2>
</a> {% endblock %}
그것은 기본적으로 나에게 새로운 것을 가르치기 위해 시간을 할애하는 모든 사람들에게 감사합니다!
다음과 같이 다른 div에 콘텐츠를 래핑 할 수 있습니다.
<a href="/">
<div>
<img src="...">
<h2>...</h2>
</div>
</a>
그런 다음 CSS에서 고정 높이와 a 태그에 오버플로를 설정합니다.
a {
border: 1px solid black;
display: block;
height: 300px;
overflow: hidden;
width: 200px;
}
마우스를 가져 가면 마법이옵니다. 이미지를 위로 번역하세요!
a:active > div,
a:focus > div,
a:hover > div {
transform: translateY(-50%);
}
마지막으로 div에 시작점과 전환을 설정하여 애니메이션을 추가합니다.
a > div {
transition: transform 100ms;
transform: translateY(0);
}
(물론 필요에 따라 값 조정)
워드 프레스에서 (100 % 익숙하지 않음)
{% block content %}
<a title="{{post.title}}" href="{{post.link}}">
<div>
{% if post.thumbnail.src %}
<img class="img-responsive post-image" src="{{post.thumbnail.src}}"/>
{% endif %}
<h2 class="post-title">{{post.title}}</h2>
</div>
</a>
{% endblock %}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다