Home>

Thanks for your attention.

I want to make the image softer while changing the image when hovering it,
We use transition-timing-function etc.

There is no problem with the display itself, but it is awkward at the beginning. It does not move gently.
There is no problem if you move the cursor several times.

Please check this demo.
https://codepen.io/takamiii-158cm/pen/WVMEEE

Is this a browser specification?
chroe ¥
Please let us know if there are any changes or descriptions that should be added.

div.imageGoods__gift01
. imageGoods
  margin: 100px
  width: 100%
  height: 0
  padding-top: (212/212) * 100%
  transition-duration: .3s
  transition-timing-function: ease
  &__ gift01
    @extend .imageGoods
    background: url (https://tools.arashichang.com/212x212/D46A6A/ffffff.png?text=commodityblock_top01.jpg) no-repeat center center
    background-size: contain
    &: hover
      background: url (https://tools.arashichang.com/212x212/cccccc/ffffff.png?text=commodityblock_top01_hover.jpg) no-repeat center center
      background-size: contain
  • Answer # 1

    This is because the image has not been loaded in advance.
    There are several ways, but the sure way is to embed the data URL in CSS.
    https://developer.mozilla.org/en/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

    You can prefetch with preload and prefetch, but please be aware of supported browsers and settings.
    https://developer.mozilla.org/en/docs/Web/HTML/Preloading_content
    https://developer.mozilla.org/en/docs/Web/HTTP/Link_prefetching_FAQ

    https://www.w3.org/TR/preload/
    https://www.w3.org/TR/resource-hints/