マウスホバー時のエフェクト効果

実現したいこと

現在Wordpressにて作成しているTOPページの合計4つの画像(補足欄をご参照ください)に対し、
マウスホバー時に、外枠の横幅や縦幅は変えずに、その枠内において
①「拡大表示(ズームイン)されるようにしたい」
②「画像全体の色が濃くなるようにしたい」

発生している問題・分からないこと

WEB検索し、下記のコードをワードプレスのCSSを追記するエディタに記入も変化がおきませんでした。
※以下は、対象の4つの画像のうち1つのコード例であり、その他の3つの画像に対しても、
class名を変えて、同じコードで試しましたが変化が起きませんでした。

.wp-block-group is-layout-constrained wp-block-group-is-layout-constrained {
position: relative;
width: 350px;
height: 350px;
overflow: hidden;
}
.wp-block-group is-layout-constrained wp-block-group-is-layout-constrained img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
transition-duration: 0.5s;
}
.wp-block-group is-layout-constrained wp-block-group-is-layout-constrained img:hover {
transform: scale(1.25, 1.25);
filter: brightness(70%);
}

該当のソースコード

HTML
1<!-- ① -->
2
3<div class="wp-block-columns vk-cols--menu vk-cols--fit vk-cols--fit--gap1 is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex">
4<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
5<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
6<div class="wp-block-cover wp-duotone-grayscale" style="min-height:300px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img fetchpriority="high" decoding="async" width="722" height="864" class="wp-block-cover__image-background wp-image-329" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg 722w, http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots-251x300.jpg 251w" sizes="(max-width: 722px) 100vw, 722px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
7<h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">アスベスト除去工事</h4>
8
9
10
11<p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color"><strong>ASBESTOS</strong></p>
12
13
14
15<p>　弊社の核となる事業です。<br>これまで大手ゼネコン現場を含む大中小さまざまな現場での実績がございます。</p>
16</div></div>
17</div>
18</div>
19
20
21
22<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
23<div class="wp-block-cover wp-duotone-dark-grayscale" style="min-height:300px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-30 has-background-dim"></span><img decoding="async" width="612" height="408" class="wp-block-cover__image-background wp-image-330" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg 612w, http://jitechhp.local/wp-content/uploads/2024/03/body_lead-300x200.jpg 300w" sizes="(max-width: 612px) 100vw, 612px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
24<h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">鉛除去工事</h4>
25
26
27
28<p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color"><strong>LEAD</strong></p>
29
30
31
32<p>　国内において、今後重要度が高くなる工事です。今後は大々的に取り組む予定です。</p>
33</div></div>
34</div>
35
36
37
38<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
39<div class="wp-block-cover is-light wp-duotone-unset-1" style="min-height:300px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-331" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
40<h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">採用コンサル事業</h4>
41
42
43
44<p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color"><strong>RECRUITMENT CONSULTANT</strong></p>
45
46
47
48<p class="has-white-color has-text-color has-link-color wp-elements-e2b5a6b2ebd0f5019a4e412880cf5299">　採用ツールの選定や募集要項の見直し、その後のフォローアップまでお任せください。またHP作成も承ります。</p>
49</div></div>
50</div>
51</div>
52
53
54<!-- ② -->
55
56<img loading="lazy" decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-425" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg" style="object-position:84% 13%" data-object-fit="cover" data-object-position="84% 13%" srcset="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/28659704_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px">

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

WEBで見つけた記事に解決策として書かれていたコードの内容は理解できました。

補足

girlstalk

2024/03/12 18:54

実現したい変化としては、以下のHPの例となります。 https://www.east-gate.co.jp/

行動規範の内容に同意します

回答3件

ご回答いただき誠にありがとうございます。
該当箇所のHTMLを以下に追記させていただきます。

お手数ではございますが、お力添えいただけますと
幸いでございます。

<div class="wp-block-cover alignfull is-light has-parallax" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;min-height:750px"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-349 has-parallax" style="background-position:50% 50%;background-image:url(http://jitechhp.local/wp-content/uploads/2024/03/body_building.jpg)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-4 wp-block-cover-is-layout-flow"> <h2 class="wp-block-heading has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom is-style-vk-heading-both_ends has-huge-font-size">業務内容</h2> <p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom animated backInUp has-vk-color-primary-vivid-color has-text-color has-link-color has-huge-font-size wp-elements-5cf0a852a17ff62847759917d06f8d13 o-anim-ready"><strong>BUSUNESS</strong></p> <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns vk-cols--menu vk-cols--fit vk-cols--fit--gap1 is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-cover ek-linked-block wp-duotone-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img fetchpriority="high" decoding="async" width="722" height="864" class="wp-block-cover__image-background wp-image-329" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg 722w, http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots-251x300.jpg 251w" sizes="(max-width: 722px) 100vw, 722px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">アスベスト除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>ASBESTOS</strong></p> <p>　弊社の核となる事業です。<br>これまで大手ゼネコン現場を含む大中小さまざまな現場での実績がございます。</p> </div><a href="http://jitechhp.local/asbestos/" class="editorskit-block-link" rel=""></a></div> </div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"> <div class="wp-block-cover ek-linked-block wp-duotone-dark-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-30 has-background-dim"></span><img decoding="async" width="612" height="408" class="wp-block-cover__image-background wp-image-330" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg 612w, http://jitechhp.local/wp-content/uploads/2024/03/body_lead-300x200.jpg 300w" sizes="(max-width: 612px) 100vw, 612px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">鉛除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>LEAD</strong></p> <p>　国内において、今後重要度が非常に高くなる工事です。今後は新たな主力事業とすべく大々的に取り組む予定です。</p> </div><a href="http://jitechhp.local/lead/" class="editorskit-block-link" rel=""></a></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-cover is-light ek-linked-block wp-duotone-unset-1" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-331" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-3 wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">採用コンサル事業</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>RECRUITMENT CONSULTANT</strong></p> <p class="has-white-color has-text-color has-link-color wp-elements-e2b5a6b2ebd0f5019a4e412880cf5299">　採用ツールの選定や募集要項の見直し、その後のフォローアップまでお任せください。またHP作成も承ります。</p> </div><a href="http://jitechhp.local/%e6%8e%a1%e7%94%a8%e3%82%b3%e3%83%b3%e3%82%b5%e3%83%ab%e4%ba%8b%e6%a5%ad/" class="editorskit-block-link" rel=""></a></div> </div> </div> </div></div>  <div class="wp-block-cover alignfull is-light" style="padding-top:0;padding-right:1.5rem;padding-bottom:0;padding-left:1.5rem;min-height:281px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim"></span><img loading="lazy" decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-425" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg" style="object-position:84% 13%" data-object-fit="cover" data-object-position="84% 13%" srcset="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/28659704_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-lg--margin-top"></div></div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center"><a href="http://jitechhp.local/contact/" class="vk_button_link btn has-background has-black-background-color btn-lg" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">お問い合わせ/CONTACT US ></span></div></a></div> <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div> <h5 class="wp-block-heading has-text-align-center o-typing-faster has-white-color has-text-color has-link-color wp-elements-017dc7521b554e37e7ff128b40ddb1b7"><strong>各種ご質問やお問い合わせは、お気軽にご連絡をお待ちしております </strong>。</h5> </div> <div style="height:46px" aria-hidden="true" class="wp-block-spacer"></div> </div></div>

投稿2024/03/13 05:44

girlstalk

総合スコア12

yambejp

2024/03/13 06:46 編集

ソースの上下を「```」で囲んでマークダウンしてくださいちなみにlocalサーバーに書いた画像は回答者は見ることができないので特に画像のズームなどを検証チェックなどはできませんのであしからず

girlstalk

2024/03/13 06:58

色々と知識不足で申し訳ございませんm(__)m 画像検証不可の件、承知いたしましたm(__)m 以下、マークダウンしたコードとなります。何卒宜しくお願い致します。  ``` <div class="wp-block-cover alignfull is-light has-parallax" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;min-height:750px"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-349 has-parallax" style="background-position:50% 50%;background-image:url(http://jitechhp.local/wp-content/uploads/2024/03/body_building.jpg)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-4 wp-block-cover-is-layout-flow"> <h2 class="wp-block-heading has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom is-style-vk-heading-both_ends has-huge-font-size">業務内容</h2> <p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom animated backInUp has-vk-color-primary-vivid-color has-text-color has-link-color has-huge-font-size wp-elements-5cf0a852a17ff62847759917d06f8d13 o-anim-ready"><strong>BUSUNESS</strong></p> <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns vk-cols--menu vk-cols--fit vk-cols--fit--gap1 is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-cover ek-linked-block wp-duotone-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img fetchpriority="high" decoding="async" width="722" height="864" class="wp-block-cover__image-background wp-image-329" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg 722w, http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots-251x300.jpg 251w" sizes="(max-width: 722px) 100vw, 722px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">アスベスト除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>ASBESTOS</strong></p> <p>　弊社の核となる事業です。<br>これまで大手ゼネコン現場を含む大中小さまざまな現場での実績がございます。</p> </div><a href="http://jitechhp.local/asbestos/" class="editorskit-block-link" rel=""></a></div> </div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"> <div class="wp-block-cover ek-linked-block wp-duotone-dark-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-30 has-background-dim"></span><img decoding="async" width="612" height="408" class="wp-block-cover__image-background wp-image-330" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg 612w, http://jitechhp.local/wp-content/uploads/2024/03/body_lead-300x200.jpg 300w" sizes="(max-width: 612px) 100vw, 612px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">鉛除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>LEAD</strong></p> <p>　国内において、今後重要度が非常に高くなる工事です。今後は新たな主力事業とすべく大々的に取り組む予定です。</p> </div><a href="http://jitechhp.local/lead/" class="editorskit-block-link" rel=""></a></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-cover is-light ek-linked-block wp-duotone-unset-1" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-331" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-3 wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">採用コンサル事業</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>RECRUITMENT CONSULTANT</strong></p> <p class="has-white-color has-text-color has-link-color wp-elements-e2b5a6b2ebd0f5019a4e412880cf5299">　採用ツールの選定や募集要項の見直し、その後のフォローアップまでお任せください。またHP作成も承ります。</p> </div><a href="http://jitechhp.local/%e6%8e%a1%e7%94%a8%e3%82%b3%e3%83%b3%e3%82%b5%e3%83%ab%e4%ba%8b%e6%a5%ad/" class="editorskit-block-link" rel=""></a></div> </div> </div> </div></div>  <div class="wp-block-cover alignfull is-light" style="padding-top:0;padding-right:1.5rem;padding-bottom:0;padding-left:1.5rem;min-height:281px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim"></span><img loading="lazy" decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-425" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg" style="object-position:84% 13%" data-object-fit="cover" data-object-position="84% 13%" srcset="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/28659704_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-lg--margin-top"></div></div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center"><a href="http://jitechhp.local/contact/" class="vk_button_link btn has-background has-black-background-color btn-lg" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">お問い合わせ/CONTACT US ></span></div></a></div> <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div> <h5 class="wp-block-heading has-text-align-center o-typing-faster has-white-color has-text-color has-link-color wp-elements-017dc7521b554e37e7ff128b40ddb1b7"><strong>各種ご質問やお問い合わせは、お気軽にご連絡をお待ちしております </strong>。</h5> </div> <div style="height:46px" aria-hidden="true" class="wp-block-spacer"></div> </div></div> ```

行動規範の内容に同意します

たとえばこんな感じで

css
1<style>
2.wrap{
3width:500px;
4height:401px;
5overflow:hidden;
6}
7img:not(:hover){
8  opacity:0.7;
9}
10img:hover{
11  animation:zoomin 1s;
12  animation-fill-mode:forwards;
13} 
14@keyframes zoomin{
15  from {transform:scale(1);opacity:0.7;}
16  to{transform:scale(1.3);opacity:1;}
17}
18}
19</style>
20<div class="wrap">
21<img src="https://4.bp.blogspot.com/-cO7SX-VhdMg/UzIgzYouxHI/AAAAAAAAeiQ/X2CP_wQ88mU/s500/sakura_kaika.png">
22</div>

投稿2024/03/13 00:29

編集2024/03/13 00:30

yambejp

総合スコア114845

girlstalk

2024/03/13 06:55

``` <div class="wp-block-cover alignfull is-light has-parallax" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;min-height:750px"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-349 has-parallax" style="background-position:50% 50%;background-image:url(http://jitechhp.local/wp-content/uploads/2024/03/body_building.jpg)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-4 wp-block-cover-is-layout-flow"> <h2 class="wp-block-heading has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom is-style-vk-heading-both_ends has-huge-font-size">業務内容</h2> <p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom animated backInUp has-vk-color-primary-vivid-color has-text-color has-link-color has-huge-font-size wp-elements-5cf0a852a17ff62847759917d06f8d13 o-anim-ready"><strong>BUSUNESS</strong></p> <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns vk-cols--menu vk-cols--fit vk-cols--fit--gap1 is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-cover ek-linked-block wp-duotone-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img fetchpriority="high" decoding="async" width="722" height="864" class="wp-block-cover__image-background wp-image-329" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots.jpg 722w, http://jitechhp.local/wp-content/uploads/2024/03/body_asbesots-251x300.jpg 251w" sizes="(max-width: 722px) 100vw, 722px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">アスベスト除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>ASBESTOS</strong></p> <p>　弊社の核となる事業です。<br>これまで大手ゼネコン現場を含む大中小さまざまな現場での実績がございます。</p> </div><a href="http://jitechhp.local/asbestos/" class="editorskit-block-link" rel=""></a></div> </div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"> <div class="wp-block-cover ek-linked-block wp-duotone-dark-grayscale" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-30 has-background-dim"></span><img decoding="async" width="612" height="408" class="wp-block-cover__image-background wp-image-330" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_lead.jpg 612w, http://jitechhp.local/wp-content/uploads/2024/03/body_lead-300x200.jpg 300w" sizes="(max-width: 612px) 100vw, 612px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">鉛除去工事</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>LEAD</strong></p> <p>　国内において、今後重要度が非常に高くなる工事です。今後は新たな主力事業とすべく大々的に取り組む予定です。</p> </div><a href="http://jitechhp.local/lead/" class="editorskit-block-link" rel=""></a></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-cover is-light ek-linked-block wp-duotone-unset-1" style="min-height:350px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-331" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg" data-object-fit="cover" srcset="http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/body_recruitment_consultant-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-container-core-cover-layout-3 wp-block-cover-is-layout-flow"> <h4 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color" id="お部屋" style="font-size:2em">採用コンサル事業</h4> <p class="has-text-align-center vk_block-margin-0--margin-top has-vk-color-primary-vivid-color has-text-color has-large-font-size"><strong>RECRUITMENT CONSULTANT</strong></p> <p class="has-white-color has-text-color has-link-color wp-elements-e2b5a6b2ebd0f5019a4e412880cf5299">　採用ツールの選定や募集要項の見直し、その後のフォローアップまでお任せください。またHP作成も承ります。</p> </div><a href="http://jitechhp.local/%e6%8e%a1%e7%94%a8%e3%82%b3%e3%83%b3%e3%82%b5%e3%83%ab%e4%ba%8b%e6%a5%ad/" class="editorskit-block-link" rel=""></a></div> </div> </div> </div></div>  <div class="wp-block-cover alignfull is-light" style="padding-top:0;padding-right:1.5rem;padding-bottom:0;padding-left:1.5rem;min-height:281px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim"></span><img loading="lazy" decoding="async" width="640" height="427" class="wp-block-cover__image-background wp-image-425" alt="" src="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg" style="object-position:84% 13%" data-object-fit="cover" data-object-position="84% 13%" srcset="http://jitechhp.local/wp-content/uploads/2024/03/28659704_s.jpg 640w, http://jitechhp.local/wp-content/uploads/2024/03/28659704_s-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px"><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"> <div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"> <div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-lg--margin-top"></div></div> <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center"><a href="http://jitechhp.local/contact/" class="vk_button_link btn has-background has-black-background-color btn-lg" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">お問い合わせ/CONTACT US ></span></div></a></div> <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div> <h5 class="wp-block-heading has-text-align-center o-typing-faster has-white-color has-text-color has-link-color wp-elements-017dc7521b554e37e7ff128b40ddb1b7"><strong>各種ご質問やお問い合わせは、お気軽にご連絡をお待ちしております </strong>。</h5> </div> <div style="height:46px" aria-hidden="true" class="wp-block-spacer"></div> </div></div> ```

yambejp

2024/03/13 07:00

私のコメントにソースを書かないでください。ご自身の発信文書に対して修正をしてください

yambejp

2024/03/13 07:01

結論として、私の回答では解決していないという認識でよろしいですか？

行動規範の内容に同意します

セレクターの指定が間違ってます。
HTMLで下記のクラス設定は、
class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"
CSSのセレクターでは、
wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained
というようにピリオドでつなぎます。

css
1.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained {
2  position: relative;
3  width: 350px;
4  height: 350px;
5  overflow: hidden;
6}
7.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained img {
8  position: static;
9  width: 100%;
10  height: 100%;
11  object-fit: cover;
12  transition-duration: 0.5s;
13}
14.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained
15  img:hover {
16  transform: scale(1.25, 1.25);
17  filter: brightness(70%);
18}

投稿2024/03/12 17:47

hatena19

総合スコア33722

girlstalk

2024/03/12 18:31

ご教示いただき、誠にありがとうございます！教えていただいたようにピリオドでつなぐことで、反応しました。重ねて恐縮なのですが、要望しております以下が実現できずに困っております。 ①「拡大表示(ズームイン)されるようにしたい」 ②「画像全体の色が濃くなるようにしたい」実現したい変化としては、以下のHPの例となります。 https://www.east-gate.co.jp/ お手数ですが、もしよろしければ、こちらにつきましても、解決策をご教示いただけますと幸いでございます。

hatena19

2024/03/12 19:34

当方で作成したサンプルでは①②どちらも実現できてますのでCSSの問題ではないですね。その作成中のページのURLは公開できませんか。

行動規範の内容に同意します

あなたの回答