Divi 테마의 HTML 편집

Question

이것은 내 첫 번째 게시물입니다. 잘못된 서식이있는 경우 사과드립니다. 제 질문을 어떻게 개선 할 수 있는지 알려주세요.

저는 Wordpress에서 Divi 테마를 사용하여 클라이언트 용 웹 사이트를 구축하고 있습니다. 마우스 오버시 표시 할 사용자 정의 오버레이 (비디오 제목 표시)를 만들고 싶습니다. 동영상 앞에 표시해야하고 이미지 (오버레이 표시)와 재생 버튼 뒤에 표시해야합니다. 현재 맞춤 오버레이는 마우스 오버시 재생 버튼 상단에 위치합니다. 버튼을 클릭 할 수 있어야하므로 분명히 문제가됩니다.

z-index 속성 (모든 div가 배치되었는지 확인)을 사용하려고했지만 아무 소용이 없었습니다. 현재 Z- 색인이 작동하지 않는 이유는 맞춤형 오버레이 overlay-one 클래스가 상위 div에 적용되고 적절한 스태킹 컨텍스트에 포함되지 않았기 때문입니다.

클래스를 이동하려면 Divi에서 수행하는 방법을 잘 모르는 HTML을 편집해야합니다. 보통, 나는 FTP를 통해 직접 편집 하겠지만 내 클라이언트는 사람에 FTP 액세스 권한이없는 약간 편집증이있는 사람들 중 하나입니다 ... 심지어 그의 개발자의 개발자. 따라서 FTP를 통해 클라이언트와의 싸움을 포함하지 않는 해결 방법이 있다면 그것에 대해 알고있을 것입니다. http://finleyholidayproductions.com/home-finley-holiday-productions/이

최상위 사업부에서 overlay-one을 보여주는 HTML, 나는 내가 대신 et_pb_video_overlay 포함 된 div로 이동해야 가정

홈페이지 링크, 나는 "모압에 오신 것을 환영합니다"최초의 비디오와 함께 일하고 있어요 . 요약 그래서

.et_pb_video_box { 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 

 
.et_pb_video_overlay { 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.et_pb_video_play { 
 
    position: absolute; 
 
    z-index: 100; 
 
} 
 

 
.overlay-one { 
 
    position: absolute; 
 
} 
 

 
.overlay-one:after { 
 
    position: absolute; 
 
    z-index: 5; 
 
    content: ''; 
 
    background: url('http://finleyholidayproductions.com/wp-content/uploads/2017/12/Video-Overlay-Template-Recovered.png'); 
 
    background-size: cover; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: .5s ease all; 
 
} 
 

 
.overlay-one:hover:after { 
 
    opacity: 1; 
 
}

<div class="et_pb_module et_pb_video overlay-one et_animated et_pb_video_0"> 
 
    <div class="et_pb_video_box"> 
 
    <iframe src="https://player.vimeo.com/video/230963151" width="1080" height="608" frameborder="0" title="Secrets of the Moab Desert" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
    </div> 
 
    <div class="et_pb_video_overlay" style="background-image: url(http://finleyholidayproductions.com/wp-content/uploads/2017/12/Thumbnails-1-Secrets-of-the-Moab-Desert.jpg);"> 
 
    <div class="et_pb_video_overlay_hover"> 
 
     <a href="#" class="et_pb_video_play"></a> 
 
    </div> 
 
    </div>

: 여기

코드입니다 내 솔루션에 올바른입니다

• 난을 편집하는 방법 HTML Divi에서이 솔루션을 제정하십시오.

감사합니다.

Answer 1

당신이 HTML에 대한 액세스를받지 주장하는 경우 :

내가 class="et_pb_video_overlay_hover" 상 :after 의사 요소를 추가 건의 할 것입니다. 다음과 같이 제목을 넣으겠습니다.

et_pb_video_overlay_hover::after { 
    content: "Title"; 
    ///other css properties to style your title etc. 
}