2

私のポートフォリオ セクションには 2 つの問題があり、思ったほどスムーズではありません。どうぞ：

  1. プロジェクトの背景色を変更し、ホバーすると小さなプラス記号が表示されるようにしました。同時に、「transition: all 0.5s ease-in-out;」を追加したいと考えました。しかし、結果は私が期待したものではありません。私の「プラス記号」は別のdivに配置する必要があるため、おそらく発生しますが、それを機能させる方法がわかりませんでした。代わりに、ここに置きます：

    .projectshot a .over:hover{
    position: absolute;
    background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
    border-radius: 8px;
    height: 150px;
    width: 200px;
    margin: 10px;
}

    これは私が達成したかった効果です: http://bjorsberg.se/

  2. 私を悩ませている 2 番目の問題は、本当に注意深く見ると、マウスで各プロジェクトに近づくと、マウス ポインターが「踊り」始め、おかしな動作をすることです。どうすれば修正できますか？

これが私のJSFiddleです：

http://jsfiddle.net/8fCMA/2/

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

私はウェブデザインを始めたばかりで（学習を始めてから4か月）、divの内側のdivを別のdiv内に配置するのが明らかに苦手です.. ありがとう！

4

2 に答える 2

1

以下を含むいくつかの小さな変更を加えました。

  • ホバーを.projectshotボックスに移動します。
  • 移動background-positionしbackground-repeatて非ホバー定義に移動します。
  • トランジションの追加。

今のところ動作しますが、まだ多くのコードを削除できます。html も大幅に削減できます。こちらもご覧になることをお勧めします ( DEMO )。

.projectshot{
    position: relative;
    padding: 10px;
    height: 150px;
    margin-bottom: 30px;
    display: inline-block;
}

.projectshot img{
    height: 150px;
    width: 200px;
    border-radius: 8px;
    -webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    -moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    box-shadow: 0 9px 13px rgba(0,0,0,.14);
}

.projectshot:hover .over{
    background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
    background-color: rgba(51, 51, 51, 0.6);
    transition: all 0.5s ease-in-out;
}

.projectshot:hover {
    cursor: pointer;
}

.over{
    position: absolute;
    border-radius: 8px;
    height: 150px;
    width: 200px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.5s ease-in-out;
}

.inner{
    background: rgba(113,122,137,.85);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: none;
}

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}
于 2013-07-24T11:26:15.567 に答える
1

私があなただったら、HTML 構造を単純化しますが、それは必要ないからです。

例: 次projectshotのようになります。

<div class="projectshot">
    <a href="http://www.yahoo.com" target="_blank">
        <img alt="Sushi" src="...">
    </a>
</div>

「カバー」を疑似要素として追加できます:before。次に、CSS でこれを「cover」要素に追加するだけです。

opacity: 0;
transition: opacity .2s;

- ホバー時 - 不透明度を 1 に変更します。

opacity: 1;

これが更新されたデモ です (デモ目的のためだけに多くの html/css コードを削除しました)

于 2013-07-24T11:23:32.883 に答える